:root {
  --ink:#111;
  --yellow:#f2c500;
  --yellow-dark:#d3ab00;
  --paper:#fff;
  --soft:#f4f4f1;
  --line:#deded9;
  --muted:#6c6c67;
  --green:#168447;
  --red:#b72b25;
  --shadow:0 12px 34px rgba(0,0,0,.10);
  --radius:10px;
}
* {
  box-sizing:border-box;
}
html {
  background:#fff;
}
body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
}
button,
input,
select,
textarea {
  font:inherit;
}
[hidden] {
  display:none!important;
}
button {
  cursor:pointer;
}
img {
  max-width:100%;
}
.button {
  border:0;
  border-radius:7px;
  padding:11px 16px;
  font-weight:780;
  letter-spacing:-.01em;
}
.button.primary {
  background:var(--yellow);
  color:#111;
}
.button.primary:hover {
  background:#ffd31a;
}
.button.secondary {
  background:#fff;
  border:1px solid var(--line);
}
.button:disabled {
  opacity:.5;
  cursor:not-allowed;
}
.icon-button {
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:var(--soft);
  font-size:24px;
}
.form-message {
  min-height:20px;
  margin-top:12px;
  color:var(--red);
  font-size:12px;
}
.auth-screen {
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(420px,1fr) minmax(380px,520px);
  background:#111;
  padding:38px;
}
.auth-brand {
  padding:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.auth-brand:after {
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  border:1px solid #f2c50033;
  border-radius:50%;
  right:-140px;
  top:-130px;
}
.auth-brand img {
  width:330px;
  margin-bottom:80px;
}
.auth-brand h1 {
  font-size:54px;
  line-height:1.02;
  letter-spacing:-.05em;
  margin:0 0 20px;
  max-width:620px;
}
.auth-brand h1 span {
  color:var(--yellow);
}
.auth-brand p {
  font-size:18px;
  color:#bbb;
  max-width:520px;
}
.auth-card {
  align-self:center;
  background:#fff;
  border-radius:14px;
  padding:34px;
  box-shadow:0 28px 80px #0008;
  min-height:530px;
}
.auth-tabs {
  display:flex;
  border-bottom:1px solid var(--line);
  margin-bottom:30px;
}
.auth-tabs button {
  flex:1;
  border:0;
  background:#fff;
  padding:14px;
  color:var(--muted);
  font-weight:750;
  border-bottom:3px solid transparent;
}
.auth-tabs button.active {
  color:#111;
  border-color:var(--yellow);
}
.auth-form {
  display:grid;
  gap:17px;
}
.auth-form h2 {
  font-size:30px;
  margin:0;
  letter-spacing:-.04em;
}
.auth-form p {
  margin:-8px 0 8px;
  color:var(--muted);
}
label {
  font-size:12px;
  font-weight:750;
  display:grid;
  gap:7px;
}
input,
select,
textarea {
  width:100%;
  border:1px solid #cfcfca;
  background:#fff;
  border-radius:6px;
  padding:11px 12px;
  color:#111;
}
textarea {
  min-height:84px;
  resize:vertical;
}
input:focus,
select:focus,
textarea:focus {
  outline:3px solid #f2c50033;
  border-color:#b99500;
}
.optional {
  color:var(--muted);
  font-weight:500;
}
.workspace {
  min-height:100vh;
  grid-template-columns:218px 1fr;
}
.sidebar {
  height:100vh;
  position:sticky;
  top:0;
  background:#111;
  color:#fff;
  padding:22px 14px;
  display:flex;
  flex-direction:column;
}
.sidebar-logo {
  height:88px;
  display:flex;
  align-items:center;
  padding:8px;
}
.sidebar-logo img {
  width:165px;
}
.sidebar nav {
  display:grid;
  gap:3px;
  margin-top:20px;
}
.sidebar nav button {
  border:0;
  background:transparent;
  color:#d4d4d0;
  text-align:left;
  padding:12px 13px;
  border-radius:7px;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:12px;
}
.sidebar nav button span {
  width:21px;
  text-align:center;
  font-size:18px;
}
.sidebar nav button.active,
.sidebar nav button:hover {
  background:#282824;
  color:var(--yellow);
}
.sidebar-profile {
  margin-top:auto;
  border-top:1px solid #333;
  padding:17px 8px;
  display:flex;
  gap:10px;
  align-items:center;
}
.sidebar-profile img {
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  background:var(--yellow);
}
.sidebar-profile strong,
.sidebar-profile small {
  display:block;
}
.sidebar-profile small {
  color:#aaa;
  margin-top:3px;
}
.logout {
  border:0;
  background:transparent;
  color:#aaa;
  text-align:left;
  padding:10px;
}
.logout:hover {
  color:#fff;
}
main {
  min-width:0;
  padding:0 28px 60px;
  background:#fff;
}
.topbar {
  height:92px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  background:#fffe;
  backdrop-filter:blur(14px);
  z-index:5;
}
.topbar h1 {
  margin:0;
  font-size:27px;
  letter-spacing:-.035em;
}
.topbar p {
  margin:5px 0 0;
  color:var(--muted);
  font-size:12px;
}
.top-actions {
  display:flex;
  gap:9px;
}
.view {
  display:none;
  padding-top:24px;
}
.view.active {
  display:block;
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:18px;
}
.section-head h2 {
  margin:0;
  font-size:21px;
  letter-spacing:-.025em;
}
.section-head p {
  margin:5px 0 0;
  color:var(--muted);
}
.metric {
  padding:20px;
  border-right:1px solid var(--line);
  min-height:128px;
}
.metric:last-child {
  border-right:0;
}
.metric label {
  color:var(--muted);
  font-weight:600;
}
.metric strong {
  display:block;
  font-size:25px;
  margin:12px 0 9px;
  letter-spacing:-.04em;
}
.metric small {
  color:var(--muted);
}
.metric small.positive {
  color:var(--green);
  font-weight:700;
}
.progress {
  height:7px;
  background:#e7e7e2;
  border-radius:99px;
  overflow:hidden;
  margin:11px 0;
}
.progress i {
  display:block;
  height:100%;
  background:var(--yellow);
}
.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:18px;
}
.panel {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
}
.panel-head {
  padding:17px 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.panel-head h3 {
  margin:0;
  font-size:15px;
}
.panel-body {
  padding:18px;
}
.finance-table,
.data-table {
  width:100%;
  border-collapse:collapse;
}
.finance-table th,
.finance-table td,
.data-table th,
.data-table td {
  padding:12px 14px;
  border-bottom:1px solid #e9e9e5;
  text-align:left;
}
.finance-table th,
.data-table th {
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}
.finance-table td:last-child,
.finance-table th:last-child {
  text-align:right;
}
.finance-table tr.total td {
  font-weight:850;
  font-size:16px;
  background:#f7f7f4;
}
.money-positive {
  color:var(--green);
  font-weight:800;
}
.empty {
  padding:50px 20px;
  text-align:center;
  color:var(--muted);
}
.kanban {
  display:grid;
  grid-template-columns:repeat(6,minmax(190px,1fr));
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.lane {
  background:#f7f7f4;
  border-right:1px solid var(--line);
  min-height:620px;
}
.lane:last-child {
  border:0;
}
.lane-head {
  padding:15px;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:92px;
  z-index:2;
}
.lane-head b,
.lane-head small {
  display:block;
}
.lane-head small {
  color:var(--muted);
  margin-top:5px;
}
.lane-cards {
  padding:9px;
  display:grid;
  gap:8px;
  align-content:start;
}
.lead-card {
  border:1px solid #ddd;
  background:#fff;
  border-radius:7px;
  padding:12px;
  text-align:left;
}
.lead-card:hover {
  border-color:#b99a12;
  box-shadow:0 5px 14px #0000000c;
}
.lead-card b,
.lead-card span,
.lead-card small {
  display:block;
}
.lead-card span {
  margin:8px 0;
  font-weight:800;
}
.lead-card small {
  color:var(--muted);
  margin-top:4px;
}
.lead-card .next {
  border-top:1px solid #eee;
  margin-top:10px;
  padding-top:8px;
  color:#333;
}
.toolbar {
  display:flex;
  gap:9px;
  align-items:center;
}
.toolbar input,
.toolbar select {
  width:auto;
  min-width:210px;
}
.client-row strong {
  display:block;
}
.client-row small {
  color:var(--muted);
}
.status-tag {
  display:inline-flex;
  padding:5px 8px;
  border-radius:99px;
  background:#eee;
  font-size:10px;
  font-weight:800;
}
.status-tag.signed {
  background:#dff4e6;
  color:#176c3b;
}
.status-tag.draft {
  background:#fff4c7;
  color:#665000;
}
.commission-layout,
.sim-layout,
.profile-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:18px;
}
.rules {
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.rule {
  background:#fff;
  padding:14px;
  display:flex;
  justify-content:space-between;
  gap:20px;
}
.rule strong {
  font-size:18px;
}
.rule small {
  display:block;
  color:var(--muted);
  margin-top:4px;
}
.sim-result {
  background:#111;
  color:#fff;
  padding:24px;
  border-radius:var(--radius);
}
.sim-result label {
  color:#aaa;
}
.sim-result strong {
  display:block;
  font-size:32px;
  margin:10px 0 23px;
  color:var(--yellow);
}
.sim-result table {
  width:100%;
  border-collapse:collapse;
}
.sim-result td {
  padding:10px 0;
  border-bottom:1px solid #333;
}
.sim-result td:last-child {
  text-align:right;
}
.sim-result tr:last-child td {
  border:0;
  font-weight:800;
}
.profile-card {
  text-align:center;
  padding:25px;
}
.profile-card img {
  width:112px;
  height:112px;
  border-radius:50%;
  object-fit:cover;
  background:var(--yellow);
  border:5px solid #f4f4f1;
}
.profile-card h2 {
  margin:14px 0 4px;
}
.profile-card p {
  color:var(--muted);
  margin:0;
}
.upload-label {
  display:inline-flex;
  margin-top:18px;
}
.upload-label input {
  display:none;
}
dialog {
  border:0;
  padding:0;
  border-radius:12px;
  box-shadow:0 30px 90px #0006;
  max-height:94vh;
}
dialog::backdrop {
  background:#0009;
}
.dialog-form {
  width:min(720px,calc(100vw - 30px));
}
.dialog-form header,
.contract-builder>header {
  padding:19px 22px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.dialog-form header h2,
.contract-builder header h2 {
  margin:0;
  font-size:21px;
}
.dialog-form header p,
.contract-builder header p {
  margin:5px 0 0;
  color:var(--muted);
  font-size:12px;
}
.dialog-form>.form-grid {
  padding:22px;
}
.dialog-form footer {
  padding:15px 22px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:9px;
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}
.form-grid .wide {
  grid-column:1/-1;
}
.contract-dialog {
  width:min(1460px,calc(100vw - 24px));
  height:94vh;
}
.contract-builder {
  height:100%;
  display:flex;
  flex-direction:column;
}
.builder-layout {
  display:grid;
  grid-template-columns:minmax(620px,1fr) 430px;
  min-height:0;
  flex:1;
}
.builder-form {
  padding:20px 24px;
  overflow:auto;
}
.builder-preview {
  background:#f2f2ef;
  border-left:1px solid var(--line);
  padding:18px;
  overflow:auto;
}
.stepper {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-bottom:20px;
}
.stepper span {
  border-top:3px solid #ddd;
  padding-top:8px;
  font-size:11px;
  color:var(--muted);
}
.stepper span.active {
  border-color:var(--yellow);
  color:#111;
  font-weight:800;
}
.form-block {
  border-bottom:1px solid var(--line);
  padding:0 0 22px;
  margin-bottom:22px;
}
.form-block h3 {
  margin:0 0 5px;
  font-size:17px;
}
.section-help {
  margin:0 0 14px;
  color:var(--muted);
  font-size:12px;
}
.choice-grid {
  display:grid;
  gap:10px;
  margin:13px 0;
}
.choice-grid.three {
  grid-template-columns:repeat(3,1fr);
}
.choice-grid.two {
  grid-template-columns:repeat(2,1fr);
}
.choice {
  padding:14px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:7px;
  text-align:left;
}
.choice.active {
  background:#111;
  color:#fff;
  border-color:var(--yellow);
  box-shadow:inset 0 0 0 2px var(--yellow);
}
.choice b,
.choice small {
  display:block;
}
.choice small {
  color:#777;
  margin-top:6px;
}
.choice.active small {
  color:#ccc;
}
.check-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:7px;
  margin-top:14px;
}
.check-grid label,
.confirmations label {
  display:flex;
  grid-template-columns:auto 1fr;
  align-items:flex-start;
  gap:8px;
  border:1px solid var(--line);
  padding:9px;
  border-radius:6px;
  font-weight:600;
}
.check-grid input,
.confirmations input {
  width:auto;
  accent-color:var(--yellow);
}
.confirmations {
  display:grid;
  gap:7px;
  margin-top:15px;
}
.preview-heading {
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
}
.preview-heading span {
  font-size:11px;
  color:var(--muted);
}
.a4-preview {
  position:relative;
  background:#fff;
  aspect-ratio:210/297;
  box-shadow:0 7px 24px #0002;
  overflow:hidden;
}
.a4-preview>img:first-child {
  width:100%;
  height:100%;
  object-fit:cover;
}
.a4-preview #previewClient {
  position:absolute;
  left:37%;
  top:37.3%;
  width:55%;
  font:7px Arial;
  background:#fff;
  padding:2px;
}
.financial-mini {
  margin:14px 0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:7px;
  padding:11px;
}
.financial-mini div {
  display:flex;
  justify-content:space-between;
  padding:7px 3px;
  border-bottom:1px solid #eee;
  font-size:11px;
}
.financial-mini div:last-child {
  border:0;
  font-weight:850;
}
.download {
  width:100%;
  font-size:15px;
}
.download-note {
  text-align:center;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
}
.toast {
  position:fixed;
  right:24px;
  bottom:24px;
  background:#111;
  color:#fff;
  padding:13px 18px;
  border-radius:8px;
  box-shadow:var(--shadow);
  transform:translateY(120px);
  transition:.25s;
  z-index:100;
}
.toast.show {
  transform:translateY(0);
}
@media(max-width:1100px) {
  .metric:nth-child(2) {
    border-right:0;
  }
  .metric:nth-child(-n+2) {
    border-bottom:1px solid var(--line);
  }
  .dashboard-grid,
  .commission-layout,
  .sim-layout,
  .profile-layout {
    grid-template-columns:1fr;
  }
  .builder-layout {
    grid-template-columns:1fr;
  }
  .builder-preview {
    display:none;
  }
}
@media(max-width:760px) {
  body {
    overflow-x:hidden;
  }
  .auth-screen {
    grid-template-columns:1fr;
    padding:18px;
  }
  .auth-brand {
    display:none;
  }
  .workspace {
    grid-template-columns:minmax(0,1fr);
    width:100%;
    overflow-x:hidden;
  }
  .sidebar {
    width:100%;
    min-width:0;
    height:auto;
    position:sticky;
    z-index:10;
    padding:10px;
  }
  .sidebar-logo,
  .sidebar-profile,
  .logout {
    display:none;
  }
  .sidebar nav {
    display:flex;
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    margin:0;
  }
  .sidebar nav button {
    white-space:nowrap;
    flex:0 0 auto;
  }
  .topbar {
    top:59px;
    height:auto;
    padding:15px 0;
    align-items:flex-start;
  }
  .top-actions {
    display:grid;
  }
  .topbar p {
    display:none;
  }
  main {
    width:100%;
    min-width:0;
    padding:0 14px 35px;
  }
  .metric {
    border-right:0;
    border-bottom:1px solid var(--line)!important;
  }
  .dashboard-grid {
    grid-template-columns:1fr;
  }
  .form-grid,
  .choice-grid.three,
  .choice-grid.two,
  .check-grid {
    grid-template-columns:1fr;
  }
  .form-grid .wide {
    grid-column:auto;
  }
  .contract-dialog {
    width:100vw;
    max-width:100vw;
    height:100vh;
    max-height:none;
    margin:0;
    inset:0;
    border-radius:0;
    overflow:hidden;
  }
  .contract-builder>header {
    padding:16px;
  }
  .builder-form {
    padding:16px;
    min-width:0;
  }
  .stepper {
    overflow-x:auto;
    display:flex;
  }
  .stepper span {
    min-width:100px;
  }
  .toolbar {
    align-items:stretch;
    flex-direction:column;
  }
  .toolbar input,
  .toolbar select {
    width:100%;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

/* V3 · dashboard, desglose financiero, pipeline y pagos */
:root {
  --blue:#1769e0;
  --blue-soft:#eaf2ff;
  --green-soft:#e9f7ef;
  --red-soft:#fff0ee;
  --charcoal:#191a1b;
}
.eyeline {
  display:block;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.performance-setup {
  min-height:230px;
  margin-bottom:20px;
  padding:34px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  border:1px solid #e7d16a;
  border-left:7px solid var(--yellow);
  border-radius:14px;
  background:#fffdf3;
  box-shadow:0 14px 34px rgba(0,0,0,.06);
}
.performance-setup h2 {
  font-size:32px;
  letter-spacing:-.045em;
  margin:0 0 10px;
  max-width:650px;
}
.performance-setup p {
  font-size:15px;
  line-height:1.65;
  color:#555;
  max-width:760px;
  margin:0;
}
.performance-setup small {
  grid-column:1/-1;
  color:var(--muted);
}
.performance-hero {
  --tone:var(--green);
  --tone-soft:var(--green-soft);
  position:relative;
  overflow:hidden;
  margin-bottom:20px;
  padding:26px;
  border:1px solid color-mix(in srgb,var(--tone),white 62%);
  border-left:7px solid var(--tone);
  border-radius:14px;
  background:#fff;
  box-shadow:0 16px 42px rgba(0,0,0,.07);
}
.performance-hero.tone-red {
  --tone:#c43831;
  --tone-soft:var(--red-soft);
}
.performance-hero.tone-green {
  --tone:#1b8a4b;
  --tone-soft:var(--green-soft);
}
.performance-hero.tone-blue {
  --tone:var(--blue);
  --tone-soft:var(--blue-soft);
}
.performance-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:25px;
}
.performance-head h2 {
  margin:0;
  font-size:38px;
  line-height:1;
  letter-spacing:-.05em;
  color:var(--tone);
}
.performance-head p {
  font-size:14px;
  margin:10px 0 0;
  color:#555;
}
.month-tools {
  display:flex;
  align-items:center;
  gap:8px;
}
.month-tools input,
.month-select {
  width:auto;
  min-width:160px;
}
.performance-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:22px;
  margin-top:28px;
}
.level-board {
  min-width:0;
  padding:22px;
  border:1px solid #e5e5df;
  border-radius:11px;
  background:#fbfbf8;
}
.level-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}
.level-meta span {
  font-size:12px;
  color:var(--muted);
}
.level-meta strong {
  font-size:18px;
  color:var(--tone);
}
.level-track {
  position:relative;
  display:flex;
  height:18px;
  border-radius:4px;
  background:#eee;
  box-shadow:inset 0 1px 2px #0002;
}
.level-track .zone {
  display:block;
  height:100%;
}
.level-track .zone-red {
  width:70%;
  background:#c43831;
}
.level-track .zone-green {
  width:21%;
  background:#24985a;
}
.level-track .zone-blue {
  width:9%;
  background:var(--blue);
}
.level-track b {
  position:absolute;
  top:-11px;
  width:3px;
  height:40px;
  background:#111;
  transform:translateX(-50%);
  box-shadow:0 0 0 3px #fff;
}
.level-track b span {
  position:absolute;
  bottom:45px;
  left:50%;
  transform:translateX(-50%);
  background:#111;
  color:#fff;
  border-radius:4px;
  padding:4px 7px;
  font-size:10px;
}
.level-labels {
  display:grid;
  grid-template-columns:70fr 21fr 9fr;
  margin-top:10px;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#6c6c67;
}
.level-labels span:nth-child(2) {
  text-align:center;
}
.level-labels span:nth-child(3) {
  text-align:right;
  color:var(--blue);
}
.earning-trio {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:25px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--line);
}
.earning-trio>div {
  padding:15px;
  background:#fff;
}
.earning-trio small,
.earning-trio span {
  display:block;
  color:var(--muted);
  font-size:10px;
}
.earning-trio strong {
  display:block;
  font-size:20px;
  letter-spacing:-.035em;
  margin:7px 0 5px;
}
.next-level {
  display:flex;
  flex-direction:column;
  padding:24px;
  background:var(--charcoal);
  color:#fff;
  border-radius:11px;
}
.next-level>span {
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#aeb1b4;
}
.next-level h3 {
  font-size:23px;
  line-height:1.1;
  letter-spacing:-.035em;
  margin:12px 0;
}
.next-level p {
  font-size:13px;
  line-height:1.55;
  color:#d5d6d7;
}
.next-level p strong {
  color:var(--yellow);
}
.next-level>small {
  font-size:9px;
  line-height:1.5;
  color:#9da0a3;
  margin-top:auto;
}
.quest-progress {
  height:8px;
  background:#393b3d;
  margin:18px 0;
  border-radius:2px;
  overflow:hidden;
}
.quest-progress i {
  display:block;
  height:100%;
  max-width:100%;
  background:var(--tone);
}
.future-note {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-top:16px;
  padding:17px 19px;
  background:var(--tone-soft);
  border-radius:9px;
}
.future-note strong {
  color:var(--tone);
}
.future-note p {
  margin:5px 0 0;
  line-height:1.5;
  color:#454545;
}
.status-orb {
  width:16px;
  height:16px;
  flex:0 0 auto;
  background:var(--tone);
  border-radius:50%;
  box-shadow:0 0 0 7px color-mix(in srgb,var(--tone),white 78%);
}
.source-foot {
  padding:10px 14px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
}
.empty.compact {
  padding:28px 18px;
}
.kanban-shell {
  width:100%;
  overflow-x:auto;
  padding-bottom:10px;
}
.kanban {
  min-width:1320px;
  overflow:visible;
}
.lane {
  min-width:0;
}
.kanban-shell .lane-head {
  position:relative;
  top:auto;
}
.lead-card {
  display:block;
  width:100%;
  min-width:0;
  overflow:hidden;
}
.stage-control {
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #ecece8;
}
.stage-control>span {
  margin:0!important;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.stage-control select {
  display:block;
  width:100%;
  min-width:0;
  height:34px;
  margin:0;
  padding:6px 28px 6px 8px;
  font-size:11px;
  background-color:#f8f8f5;
}
.lane-empty {
  padding:35px 12px;
  color:#9a9a95;
  text-align:center;
  font-size:11px;
}
.table-scroll {
  overflow-x:auto;
}
.data-table {
  min-width:760px;
}
.data-table td strong,
.data-table td small {
  display:block;
}
.data-table td small {
  margin-top:4px;
  color:var(--muted);
}
.row-actions {
  display:flex;
  gap:6px;
  align-items:center;
  white-space:nowrap;
}
.compact-button {
  padding:8px 10px;
  font-size:11px;
}
.payment-status {
  display:inline-flex;
  white-space:nowrap;
  padding:5px 8px;
  border-radius:4px;
  font-size:10px;
  font-weight:850;
}
.payment-status.pending {
  background:#fff1ee;
  color:#a92a24;
}
.payment-status.partial {
  background:#fff5cb;
  color:#6c5400;
}
.payment-status.paid {
  background:#e4f5ea;
  color:#176c3b;
}
.payment-status.neutral {
  background:#eee;
  color:#666;
}
.money-summary {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
.money-summary article {
  padding:23px;
  border-radius:11px;
}
.money-summary span,
.money-summary small {
  display:block;
}
.money-summary span {
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.money-summary strong {
  display:block;
  font-size:30px;
  letter-spacing:-.045em;
  margin:10px 0;
}
.money-summary small {
  line-height:1.45;
}
.confirmed-card {
  background:#111;
  color:#fff;
}
.confirmed-card span,
.confirmed-card small {
  color:#aaa;
}
.confirmed-card strong {
  color:var(--yellow);
}
.potential-card {
  background:var(--blue-soft);
  border:1px solid #c6dcff;
  color:#123d78;
}
.potential-card strong {
  font-size:25px!important;
  color:var(--blue);
}
.calculation-table td:nth-child(n+3),
.calculation-table th:nth-child(n+3) {
  text-align:right;
}
.calculation-table tr.total td {
  font-size:15px;
  font-weight:900;
  background:#f6f6f2;
}
.payment-ledger {
  margin-top:16px;
}
.explanation-stack {
  display:grid;
  gap:10px;
  align-content:start;
}
.explanation-stack article,
.manual-note {
  padding:18px;
  border:1px solid #e4e4df;
  border-left:4px solid var(--yellow);
  border-radius:8px;
  background:#fff;
}
.explanation-stack article.contextual {
  border-left-color:var(--blue);
  background:var(--blue-soft);
}
.explanation-stack span {
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.explanation-stack p,
.manual-note p {
  line-height:1.55;
  color:#4f4f4b;
}
.explanation-stack cite,
.manual-note cite,
.sim-citation cite {
  display:block;
  margin-top:10px;
  color:#777;
  font-size:10px;
  font-style:normal;
}
.manual-note {
  margin-top:18px;
}
.manual-note.inline {
  margin:20px 0 0;
}
.sim-citation {
  margin-top:19px;
  padding-top:17px;
  border-top:1px solid #37393b;
  color:#d2d3d4;
  font-size:11px;
  line-height:1.5;
}
.sim-citation b,
.sim-citation cite {
  display:block;
  color:var(--yellow);
}
.sim-citation p {
  margin:8px 0;
  color:#d2d3d4;
}
.money-negative {
  color:var(--red);
  font-weight:800;
}
.company-breakdown {
  margin-top:18px;
}
.full-button {
  width:100%;
  margin-top:18px;
}
.formula-hint {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:13px;
  background:#fff9d9;
  border-left:4px solid var(--yellow);
  border-radius:5px;
}
.formula-hint span {
  font-weight:500;
  color:#555;
}
.consent-line {
  display:flex!important;
  grid-template-columns:auto 1fr!important;
  align-items:flex-start;
  gap:9px!important;
  padding:12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fafaf7;
}
.consent-line input {
  width:auto;
  accent-color:var(--yellow);
}
.payment-context {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:20px 22px 0;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--line);
}
.payment-context>div {
  padding:14px;
  background:#f8f8f5;
}
.payment-context span,
.payment-context b,
.payment-context small {
  display:block;
}
.payment-context span {
  font-size:9px;
  font-weight:900;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.payment-context b {
  margin:6px 0;
}
.payment-context small {
  color:var(--muted);
  line-height:1.4;
}
.payment-total {
  padding:15px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fafaf7;
}
.payment-total>div {
  display:flex;
  justify-content:space-between;
  padding:6px 0;
}
.payment-total .grand {
  font-size:17px;
  border-top:1px solid var(--line);
  margin-top:5px;
  padding-top:12px;
}
.payment-total .commission-preview {
  margin-top:7px;
  padding:11px;
  background:#eaf7ef;
  color:#176c3b;
  border-radius:5px;
}
.payment-total>small {
  display:block;
  margin-top:10px;
  color:var(--muted);
  font-weight:500;
  line-height:1.5;
}
.a4-preview #previewClient {
  top:37.3%;
}
.a4-preview.is-msa:before,
.a4-preview.is-sow:before {
  content:"";
  position:absolute;
  z-index:2;
  left:6%;
  top:4.4%;
  width:22%;
  height:5.8%;
  background:#fff;
}
.a4-preview.is-msa #previewClient,
.a4-preview.is-sow #previewClient {
  z-index:3;
}
.mobile-contract-submit {
  display:none;
  width:100%;
  margin:0 0 18px;
}
@media(max-width:1180px) {
  .performance-layout {
    grid-template-columns:1fr;
  }
  .next-level {
    min-height:230px;
  }
  .performance-head {
    align-items:stretch;
  }
  .month-tools {
    flex-direction:column;
    align-items:stretch;
  }
  .month-tools input {
    width:100%;
  }
}
@media(max-width:1100px) {
  .mobile-contract-submit {
    display:block;
  }
}
@media(max-width:760px) {
  .performance-setup {
    grid-template-columns:1fr;
    padding:24px;
  }
  .performance-setup small {
    grid-column:auto;
  }
  .performance-hero {
    padding:20px 16px;
  }
  .performance-head {
    display:grid;
  }
  .performance-head h2 {
    font-size:31px;
  }
  .performance-layout {
    margin-top:20px;
  }
  .level-board {
    padding:18px 12px;
  }
  .earning-trio {
    grid-template-columns:1fr;
  }
  .level-labels {
    font-size:8px;
  }
  .money-summary {
    grid-template-columns:1fr;
  }
  .money-summary strong {
    font-size:25px;
  }
  .commission-layout {
    grid-template-columns:1fr;
  }
  .payment-context {
    grid-template-columns:1fr;
  }
  .section-head {
    align-items:stretch;
    gap:14px;
    flex-direction:column;
  }
  .section-head .button,
  .section-head .month-select {
    width:100%;
  }
  .row-actions {
    flex-direction:column;
    align-items:stretch;
  }
  .stage-control {
    grid-template-columns:54px minmax(0,1fr);
  }
}

/* V4 · academia, cultura, pagos y capacitación guiada */
.demo-entry {
  margin-top:24px;
  padding:15px;
  border:1px solid #e0c33a;
  border-radius:9px;
  background:#fff9d9;
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
}
.demo-entry span,
.demo-entry strong,
.demo-entry small {
  display:block;
}
.demo-entry span {
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}
.demo-entry strong {
  margin:5px 0 3px;
}
.demo-entry small {
  color:#6b6549;
  line-height:1.35;
}
.demo-button {
  background:#111;
  color:#fff;
  white-space:nowrap;
}
.demo-button:hover {
  background:#292929;
}
.demo-ribbon {
  height:34px;
  margin:0 -28px;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--yellow);
  font-size:11px;
}
.demo-ribbon b {
  display:inline-block;
  margin-right:7px;
  padding:3px 6px;
  border-radius:3px;
  background:#111;
  color:#fff;
  font-size:9px;
  letter-spacing:.08em;
}
.demo-ribbon button {
  border:0;
  background:transparent;
  text-decoration:underline;
  font-weight:800;
}
.demo-ribbon:not([hidden])+.topbar {
  top:34px;
}
.top-actions {
  flex-wrap:wrap;
  justify-content:flex-end;
}
.tutorial-button {
  border:1px solid #d0aa00;
  background:#fff9d9;
  color:#4e4000;
}
.tutorial-button:hover {
  background:var(--yellow);
}
.resource-rail {
  display:grid;
  grid-template-columns:minmax(210px,1.2fr) repeat(3,minmax(180px,1fr));
  gap:1px;
  margin-bottom:20px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--line);
}
.resource-rail-copy,
.resource-rail a,
.resource-rail button {
  min-width:0;
  padding:16px 18px;
  background:#fff;
}
.resource-rail-copy strong {
  display:block;
  font-size:15px;
}
.resource-rail a,
.resource-rail button {
  border:0;
  color:#111;
  text-decoration:none;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  text-align:left;
}
.resource-rail a:hover,
.resource-rail button:hover {
  background:#fff9db;
}
.resource-rail i {
  font-style:normal;
  font-size:9px;
  font-weight:900;
  color:#a88700;
}
.resource-rail b,
.resource-rail small {
  display:block;
}
.resource-rail small {
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
}
.resource-rail em {
  font-style:normal;
  font-weight:900;
}
.resource-hub {
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.resource-hero {
  padding:30px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:25px;
  background:#111;
  color:#fff;
}
.resource-hero h2 {
  max-width:760px;
  margin:0;
  font-size:31px;
  line-height:1.12;
  letter-spacing:-.04em;
}
.resource-hero p {
  max-width:720px;
  color:#bdbdb9;
  line-height:1.55;
}
.resource-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line);
}
.resource-card {
  min-height:300px;
  padding:25px;
  background:#fff;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:16px;
  align-content:start;
  border-top:5px solid transparent;
}
.resource-card.academy {
  border-top-color:var(--yellow);
}
.resource-card.culture {
  border-top-color:#111;
}
.resource-card.payment {
  border-top-color:var(--green);
}
.resource-card>div>span {
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  color:var(--muted);
}
.resource-card h3 {
  font-size:22px;
  letter-spacing:-.035em;
  margin:9px 0;
}
.resource-card p {
  min-height:68px;
  line-height:1.55;
  color:#5b5b56;
}
.resource-card .button {
  display:inline-flex;
  text-decoration:none;
  align-items:center;
  justify-content:center;
}
.resource-actions {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.resource-actions .button {
  font-size:11px;
  padding:9px 11px;
}
.responsibility-map {
  margin-top:20px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px;
  background:#fbfbf8;
}
.responsibility-intro {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,440px);
  gap:10px 38px;
  align-items:start;
}
.responsibility-intro .eyeline,
.responsibility-intro h2,
.responsibility-intro>p,
.responsibility-intro>cite {
  grid-column:1;
}
.responsibility-intro h2 {
  margin:0;
  font-size:32px;
  letter-spacing:-.04em;
}
.responsibility-intro>p {
  line-height:1.65;
  color:#555;
}
.responsibility-intro blockquote {
  grid-column:2;
  grid-row:1/5;
  margin:0;
  padding:24px;
  border-left:5px solid var(--yellow);
  background:#111;
  color:#fff;
  font-size:19px;
  font-weight:750;
  line-height:1.45;
}
.responsibility-intro cite {
  font-size:10px;
  color:var(--muted);
  font-style:normal;
}
.responsibility-phases {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:28px;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:var(--line);
  gap:1px;
}
.responsibility-phases article {
  min-height:145px;
  padding:16px;
  background:#fff;
}
.responsibility-phases article>b {
  display:inline-grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:50%;
  background:#ecece7;
}
.responsibility-phases article.starts>b {
  background:var(--yellow);
}
.responsibility-phases article.ends>b {
  background:#111;
  color:#fff;
}
.responsibility-phases strong {
  display:block;
  margin:13px 0 6px;
}
.responsibility-phases p {
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.responsibility-boundaries {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:16px;
}
.responsibility-boundaries article {
  padding:18px;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--line);
}
.responsibility-boundaries span {
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
  color:#947700;
}
.responsibility-boundaries strong {
  display:block;
  margin:7px 0;
}
.responsibility-boundaries p {
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.culture-reminder {
  margin-top:20px;
  padding:30px;
  border-radius:14px;
  background:#111;
  color:#fff;
  border-left:8px solid var(--yellow);
}
.culture-reminder>span {
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
  color:var(--yellow);
}
.culture-reminder h2 {
  max-width:970px;
  margin:12px 0;
  font-size:28px;
  line-height:1.2;
}
.culture-reminder p {
  max-width:850px;
  color:#bbb;
  line-height:1.55;
}
.culture-reminder cite {
  font-size:10px;
  color:#8f8f8b;
  font-style:normal;
}
.delivery-dialog {
  width:min(720px,calc(100vw - 28px));
}
.delivery-card header {
  padding:22px 24px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
}
.delivery-card h2 {
  margin:0;
  font-size:26px;
  letter-spacing:-.04em;
}
.delivery-card header p {
  margin:7px 0 0;
  color:var(--muted);
}
.delivery-flow {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border-bottom:1px solid var(--line);
}
.delivery-step {
  padding:18px;
  background:#fff;
  display:flex;
  gap:10px;
}
.delivery-step>b {
  width:26px;
  height:26px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eee;
}
.delivery-step.done>b {
  background:#dff4e6;
  color:#176c3b;
}
.delivery-step.current>b {
  background:var(--yellow);
}
.delivery-step strong,
.delivery-step small {
  display:block;
}
.delivery-step small {
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}
.delivery-actions {
  padding:22px 24px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.delivery-actions a {
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.privacy-note {
  margin:0;
  padding:0 24px 22px;
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}
.tutorial-layer {
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
}
.tutorial-spotlight {
  position:fixed;
  border:2px solid var(--yellow);
  border-radius:14px;
  box-shadow:0 0 0 9999px rgba(10,10,10,.67),0 0 0 6px rgba(242,197,0,.19);
  transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease;
  pointer-events:none;
}
.tutorial-glass {
  position:fixed;
  right:28px;
  bottom:28px;
  width:min(430px,calc(100vw - 32px));
  max-height:calc(100vh - 40px);
  overflow:auto;
  padding:24px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:20px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(30px) saturate(145%);
  -webkit-backdrop-filter:blur(30px) saturate(145%);
  box-shadow:0 28px 90px rgba(0,0,0,.34);
  pointer-events:auto;
}
.tutorial-progress {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#6c6c67;
  font-size:10px;
  font-weight:800;
}
.tutorial-progress button {
  border:0;
  background:transparent;
  color:#555;
  text-decoration:underline;
}
.tutorial-bar {
  height:4px;
  margin:11px 0 22px;
  background:rgba(0,0,0,.09);
  overflow:hidden;
  border-radius:99px;
}
.tutorial-bar i {
  display:block;
  height:100%;
  background:var(--yellow);
  transition:width .2s;
}
.tutorial-kicker {
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
  color:#9b7c00;
}
.tutorial-glass h2 {
  margin:9px 0 10px;
  font-size:28px;
  line-height:1.1;
  letter-spacing:-.04em;
}
.tutorial-glass>p {
  line-height:1.58;
  color:#4f4f4b;
}
.tutorial-responsibility {
  display:grid;
  gap:5px;
  margin:17px 0;
  padding:14px;
  border:1px solid rgba(218,181,17,.55);
  border-radius:10px;
  background:rgba(255,246,190,.72);
}
.tutorial-responsibility b {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.tutorial-responsibility span {
  font-size:12px;
  line-height:1.45;
}
.tutorial-glass cite {
  display:block;
  color:#777;
  font-size:9px;
  font-style:normal;
  line-height:1.4;
}
.tutorial-glass footer {
  display:flex;
  justify-content:space-between;
  gap:9px;
  margin-top:22px;
}
.tutorial-glass footer .button {
  min-width:110px;
}
.tutorial-open {
  overflow:hidden;
}
@media(max-width:1220px) {
  .resource-rail {
    grid-template-columns:repeat(3,1fr);
  }
  .resource-rail-copy {
    grid-column:1/-1;
  }
  .resource-cards {
    grid-template-columns:1fr;
  }
  .resource-card {
    min-height:0;
  }
  .responsibility-phases {
    grid-template-columns:repeat(2,1fr);
  }
  .top-actions .button {
    padding:9px 11px;
    font-size:11px;
  }
}
@media(max-width:1100px) {
  .responsibility-intro {
    grid-template-columns:1fr;
  }
  .responsibility-intro .eyeline,
  .responsibility-intro h2,
  .responsibility-intro>p,
  .responsibility-intro>cite,
  .responsibility-intro blockquote {
    grid-column:1;
    grid-row:auto;
  }
  .responsibility-intro blockquote {
    margin-top:10px;
  }
}
@media(max-width:760px) {
  .demo-entry {
    grid-template-columns:1fr;
  }
  .demo-button {
    width:100%;
  }
  .demo-ribbon {
    margin:0 -14px;
    padding:0 14px;
  }
  .demo-ribbon:not([hidden])+.topbar {
    top:93px;
  }
  .topbar {
    flex-direction:column;
    gap:12px;
  }
  .top-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .top-actions .tutorial-button {
    grid-column:1/-1;
  }
  .resource-rail {
    grid-template-columns:1fr;
  }
  .resource-rail-copy {
    grid-column:auto;
  }
  .resource-hero {
    padding:24px;
    display:grid;
  }
  .resource-hero h2 {
    font-size:26px;
  }
  .resource-card {
    grid-template-columns:34px 1fr;
    padding:20px;
  }
  .responsibility-map {
    padding:20px;
  }
  .responsibility-intro {
    grid-template-columns:1fr;
  }
  .responsibility-intro .eyeline,
  .responsibility-intro h2,
  .responsibility-intro>p,
  .responsibility-intro>cite,
  .responsibility-intro blockquote {
    grid-column:1;
    grid-row:auto;
  }
  .responsibility-phases,
  .responsibility-boundaries {
    grid-template-columns:1fr;
  }
  .responsibility-phases article {
    min-height:0;
  }
  .delivery-flow {
    grid-template-columns:1fr;
  }
  .tutorial-spotlight {
    display:none;
  }
  .tutorial-glass {
    left:16px!important;
    right:16px!important;
    top:auto!important;
    bottom:16px!important;
    width:auto;
    max-height:calc(100vh - 32px);
    padding:21px;
  }
  .tutorial-glass h2 {
    font-size:24px;
  }
}

/* V5 · operación comercial, escaparate y acabado liquid glass */
:root {
  --glass:rgba(255,255,255,.76);
  --glass-strong:rgba(255,255,255,.9);
  --glass-line:rgba(255,255,255,.82);
  --deep-shadow:0 22px 55px rgba(30,31,28,.09),inset 0 1px 0 rgba(255,255,255,.95);
  --bevel:inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(0,0,0,.045),0 10px 28px rgba(20,22,18,.07);
}
html {
  background:#eceee9;
}
body {
  background:radial-gradient(circle at 78% 0,#fff6cb 0,transparent 24%),linear-gradient(135deg,#f4f5f1,#ebece8 58%,#f5f4ef);
  background-attachment:fixed;
}
main {
  background:transparent;
}
.topbar {
  margin:0 -28px;
  padding:0 28px;
  background:rgba(248,249,246,.74);
  border-color:rgba(130,130,120,.17);
  box-shadow:0 8px 28px rgba(22,22,18,.035);
  backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%);
}
.sidebar {
  background:linear-gradient(160deg,#161715,#030403 72%);
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:18px 0 50px rgba(0,0,0,.13);
}
.sidebar-logo img {
  border-radius:8px;
}
.sidebar nav button {
  min-height:45px;
  border:1px solid transparent;
  transition:.18s ease;
}
.sidebar nav button.active {
  background:linear-gradient(145deg,#ffe13a,var(--yellow));
  color:#090909;
  border-color:#ffed77;
  box-shadow:inset 0 1px 0 #fff9,0 10px 28px rgba(242,197,0,.25);
}
.sidebar nav button:hover:not(.active) {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.08);
}
.button {
  min-height:42px;
  border-radius:10px;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.button:hover:not(:disabled) {
  transform:translateY(-1px);
}
.button.primary {
  background:linear-gradient(145deg,#ffe24a,var(--yellow));
  border:1px solid #d7ae00;
  box-shadow:inset 0 1px 0 #fff9,0 7px 16px rgba(197,157,0,.16);
}
.button.secondary,
.tutorial-button {
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 #fff,0 5px 15px rgba(0,0,0,.04);
}
.panel,
.resource-rail,
.performance-setup,
.performance-hero,
.responsibility-map,
.quote-summary,
.pipeline-intelligence,
.weekly-card,
.alert-stack,
.product-admin-hub,
.commercial-library,
.commission-workflow,
.manager-scoreboard,
.daily-hero,
.completed-strip {
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--deep-shadow);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
}
input,
select,
textarea {
  min-height:42px;
  border-color:rgba(90,90,82,.24);
  background:rgba(255,255,255,.82);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.035);
}
textarea {
  min-height:92px;
}
dialog {
  border:1px solid rgba(255,255,255,.86);
  background:rgba(252,252,249,.94);
  box-shadow:0 40px 120px rgba(0,0,0,.35),inset 0 1px 0 #fff;
  backdrop-filter:blur(34px) saturate(145%);
}
dialog::backdrop {
  background:rgba(8,9,8,.58);
  backdrop-filter:blur(8px);
}
.product-launch-rail {
  position:relative;
  overflow:hidden;
  margin-bottom:22px;
  border-radius:18px;
  background:#0a0b0a;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 62px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.11);
}
.launch-rail-head {
  position:relative;
  z-index:2;
  display:flex;
  align-items:end;
  justify-content:space-between;
  padding:23px 25px 14px;
}
.launch-rail-head .eyeline {
  color:var(--yellow);
}
.launch-rail-head h2 {
  margin:0;
  font-size:25px;
  letter-spacing:-.04em;
}
.glass-button {
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(16px);
}
.launch-track {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(540px,1fr);
  gap:12px;
  padding:0 14px 14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}
.launch-card {
  position:relative;
  min-height:270px;
  overflow:hidden;
  border-radius:14px;
  scroll-snap-align:start;
  background:#181918;
  border:1px solid rgba(255,255,255,.13);
}
.launch-card>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.launch-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,4,3,.96) 0,rgba(3,4,3,.76) 48%,rgba(3,4,3,.06) 82%);
}
.launch-overlay {
  position:relative;
  z-index:2;
  max-width:460px;
  padding:28px;
}
.launch-overlay>span {
  display:inline-flex;
  padding:5px 9px;
  border-radius:99px;
  background:var(--yellow);
  color:#111;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
}
.launch-overlay h3 {
  margin:13px 0 6px;
  font-size:29px;
  line-height:1.02;
  letter-spacing:-.045em;
}
.launch-overlay p {
  margin:0;
  color:#d6d6d2;
  line-height:1.45;
}
.launch-comp {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:17px 0;
}
.launch-comp b {
  padding:6px 9px;
  border-radius:7px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  font-size:10px;
}
.launch-cta {
  background:var(--yellow);
  color:#111;
}
.command-deck {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);
  margin-bottom:22px;
  border-radius:17px;
  overflow:hidden;
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--deep-shadow);
  backdrop-filter:blur(22px);
}
.command-main {
  padding:22px;
}
.command-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  margin-bottom:12px;
}
.command-heading h2 {
  margin:0;
  font-size:25px;
  letter-spacing:-.04em;
}
.agenda-mini,
.agenda-row {
  display:grid;
}
.agenda-row {
  grid-template-columns:30px minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid rgba(80,80,72,.12);
}
.agenda-row:last-child {
  border-bottom:0;
}
.agenda-row strong,
.agenda-row small {
  display:block;
}
.agenda-row small {
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}
.task-check {
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid #c9c9c2;
  background:#fff;
  font-weight:900;
}
.task-due {
  font-size:10px;
  font-weight:800;
  color:#5d5d57;
}
.task-snooze {
  border:0;
  background:transparent;
  color:#7d6900;
  text-decoration:underline;
  font-size:10px;
  font-weight:800;
}
.agenda-row.is-overdue .task-due {
  color:var(--red);
}
.agenda-row.is-complete {
  opacity:.56;
}
.agenda-row.is-complete strong {
  text-decoration:line-through;
}
.daily-hero {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;
  margin-bottom:18px;
  padding:26px;
  border-radius:17px;
  border-left:7px solid var(--yellow);
}
.daily-hero h2 {
  margin:4px 0 8px;
  font-size:30px;
  letter-spacing:-.045em;
}
.daily-hero p {
  margin:0;
  color:var(--muted);
}
.daily-score {
  display:grid;
  place-items:center;
  width:132px;
  height:112px;
  border-radius:17px;
  background:#111;
  color:#fff;
  box-shadow:inset 0 1px 0 #ffffff22,0 16px 32px #0002;
}
.daily-score strong {
  font-size:40px;
  color:var(--yellow);
}
.daily-score span {
  font-size:10px;
  color:#bbb;
}
.today-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:18px;
}
.today-grid>.panel>div:not(.panel-head) {
  padding:0 18px;
}
.secondary-head {
  margin-top:8px;
}
.alert-stack {
  padding-bottom:10px;
  border-radius:13px;
  overflow:hidden;
}
.risk-alert {
  width:calc(100% - 20px);
  margin:8px 10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  display:grid;
  grid-template-columns:9px 1fr auto;
  gap:9px;
  align-items:center;
  text-align:left;
}
.risk-alert i {
  width:8px;
  height:8px;
  border-radius:50%;
}
.risk-alert.red i {
  background:var(--red);
}
.risk-alert.yellow i {
  background:var(--yellow);
}
.risk-alert.blue i {
  background:var(--blue);
}
.risk-alert b {
  font-size:10px;
}
.weekly-card {
  margin-top:18px;
  border-radius:13px;
  overflow:hidden;
}
.weekly-card.compact {
  margin-top:18px;
}
.weekly-grid {
  display:grid;
  gap:14px;
  padding:16px;
}
.weekly-grid span,
.weekly-grid strong {
  display:block;
}
.weekly-grid span {
  font-size:10px;
  color:var(--muted);
}
.weekly-grid strong {
  margin-top:4px;
}
.weekly-grid strong small {
  font-weight:500;
  color:#888;
}
.weekly-grid .progress {
  margin:7px 0 0;
}
.completed-strip {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:22px;
  margin-top:18px;
  padding:20px;
  border-radius:13px;
}
.completed-strip h3 {
  margin:0;
}
.completed-strip>div:last-child {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.completed-strip>div:last-child span {
  padding:7px 9px;
  border-radius:8px;
  background:#e8f6ed;
  color:#176c3b;
  font-size:10px;
}
.pipeline-intelligence {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-radius:14px;
  overflow:hidden;
  margin-bottom:15px;
}
.pipeline-intelligence>div {
  padding:17px;
  border-right:1px solid rgba(90,90,82,.12);
}
.pipeline-intelligence>div span,
.pipeline-intelligence>div strong {
  display:block;
}
.pipeline-intelligence>div span {
  font-size:10px;
  color:var(--muted);
}
.pipeline-intelligence>div strong {
  margin-top:6px;
  font-size:20px;
}
.pipeline-intelligence>p {
  grid-column:1/-1;
  margin:0;
  padding:11px 17px;
  background:rgba(255,248,207,.72);
  font-size:10px;
  color:#5e542b;
}
.lead-evidence {
  margin-top:11px;
  padding:10px;
  border-radius:8px;
  background:#f5f5f1;
}
.lead-evidence>div:first-child {
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.lead-evidence span,
.lead-evidence small {
  font-size:9px;
  color:var(--muted);
}
.lane {
  background:rgba(246,247,243,.78);
}
.lane-head {
  background:rgba(255,255,255,.9);
}
.lead-card {
  border-radius:10px;
  box-shadow:inset 0 1px 0 #fff,0 4px 12px #0000000a;
}
.workspace-dialog {
  width:min(1040px,calc(100vw - 30px));
  max-height:94vh;
}
.workspace-form {
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:92vh;
}
.workspace-form>header {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:22px 25px;
  border-bottom:1px solid var(--line);
}
.workspace-form>header h2 {
  margin:0;
  font-size:27px;
  letter-spacing:-.04em;
}
.workspace-form>header p {
  margin:5px 0 0;
  color:var(--muted);
}
.workspace-scroll {
  padding:20px 24px;
  overflow:auto;
}
.workspace-form>footer {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  padding:15px 24px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.72);
}
.workspace-block {
  padding:18px;
  border:1px solid rgba(105,105,95,.17);
  border-radius:12px;
  background:rgba(255,255,255,.68);
  box-shadow:var(--bevel);
}
.workspace-block+.workspace-block {
  margin-top:15px;
}
.block-title {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:start;
  margin-bottom:14px;
}
.block-title h3 {
  margin:0;
}
.block-title p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px;
}
.block-title>span {
  padding:5px 8px;
  border-radius:7px;
  background:#111;
  color:var(--yellow);
  font-size:10px;
  font-weight:900;
}
.workspace-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:15px;
}
.workspace-columns .workspace-block {
  margin:0;
}
.gate-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.gate-list label {
  display:flex;
  grid-template-columns:auto 1fr;
  align-items:start;
  padding:12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}
.gate-list input {
  width:auto;
  min-height:0;
  accent-color:var(--yellow);
}
.mini-records {
  display:grid;
  gap:7px;
  margin-bottom:10px;
}
.mini-records article {
  padding:10px;
  border-radius:8px;
  background:#f4f4f0;
}
.mini-records strong,
.mini-records small {
  display:block;
}
.mini-records small {
  margin-top:3px;
  color:var(--muted);
}
.inline-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.inline-form select {
  grid-column:1/-1;
}
.client-facts {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-bottom:15px;
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
  background:var(--line);
}
.client-facts>div {
  padding:15px;
  background:#fff;
}
.client-facts span,
.client-facts strong,
.client-facts small {
  display:block;
}
.client-facts span {
  font-size:9px;
  color:var(--muted);
  text-transform:uppercase;
}
.client-facts strong {
  margin:6px 0;
}
.client-facts small {
  color:var(--muted);
}
.timeline-list {
  display:grid;
}
.timeline-list article {
  display:grid;
  grid-template-columns:86px 1fr;
  gap:13px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.timeline-list time {
  font-size:10px;
  color:var(--muted);
}
.timeline-list strong,
.timeline-list small {
  display:block;
}
.timeline-list small {
  margin-top:4px;
  color:var(--muted);
}
.quote-summary,
.manager-scoreboard,
.review-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:18px;
  border-radius:14px;
  overflow:hidden;
}
.quote-summary>div,
.manager-scoreboard>div,
.review-summary>div {
  padding:19px;
  border-right:1px solid rgba(90,90,82,.14);
}
.quote-summary span,
.quote-summary strong,
.manager-scoreboard span,
.manager-scoreboard strong,
.review-summary span,
.review-summary strong {
  display:block;
}
.quote-summary span,
.manager-scoreboard span,
.review-summary span {
  font-size:10px;
  color:var(--muted);
}
.quote-summary strong,
.manager-scoreboard strong,
.review-summary strong {
  margin-top:7px;
  font-size:24px;
}
.quote-summary>p {
  grid-column:1/-1;
  margin:0;
  padding:11px 18px;
  background:#fff7cc;
  color:#5b5127;
  font-size:10px;
}
.quote-status,
.lifecycle-status,
.review-status {
  display:inline-flex;
  padding:5px 8px;
  border-radius:99px;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.status-draft,
.lifecycle-issued,
.review-accrued {
  background:#eee;
  color:#666;
}
.status-sent,
.lifecycle-sent,
.review-submitted {
  background:#eaf2ff;
  color:#185bb7;
}
.status-accepted,
.lifecycle-paid,
.lifecycle-production,
.review-approved {
  background:#e5f5eb;
  color:#176c3b;
}
.status-rejected,
.status-expired {
  background:#fff0ee;
  color:#a52d27;
}
.review-paid,
.lifecycle-closed {
  background:#111;
  color:var(--yellow);
}
.lifecycle-signed,
.lifecycle-delivered {
  background:#fff4c7;
  color:#6a5300;
}
.lifecycle-row td {
  background:#fbfbf8;
}
.lifecycle-rail {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px;
  padding:10px 14px 14px;
}
.lifecycle-rail span {
  display:grid;
  justify-items:center;
  gap:5px;
  color:#999;
  font-size:8px;
  text-align:center;
}
.lifecycle-rail i {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#ecece7;
  font-style:normal;
  font-weight:850;
}
.lifecycle-rail span.done i {
  background:#dff3e6;
  color:#176c3b;
}
.lifecycle-rail span.current {
  color:#111;
  font-weight:850;
}
.lifecycle-rail span.current i {
  background:var(--yellow);
  color:#111;
}
.commission-workflow {
  margin-top:18px;
  border-radius:13px;
  overflow:hidden;
}
.review-summary {
  margin:0;
  border-radius:0;
  grid-template-columns:repeat(4,1fr);
  box-shadow:none;
  background:#f8f8f5;
}
.review-ledger {
  display:grid;
}
.review-ledger article {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 130px auto;
  gap:13px;
  align-items:center;
  padding:13px 17px;
  border-top:1px solid var(--line);
}
.review-ledger strong,
.review-ledger small {
  display:block;
}
.review-ledger small {
  margin-top:4px;
  color:var(--muted);
}
.workflow-foot {
  margin:0;
  padding:13px 17px;
  background:#fff8d4;
  color:#625624;
  font-size:10px;
}
.manager-scoreboard {
  grid-template-columns:repeat(4,1fr);
}
.manager-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:18px;
}
.manager-grid .weekly-card {
  margin-top:0;
}
.manager-risk {
  margin-top:18px;
  overflow:hidden;
}
.manager-risk button {
  width:100%;
  padding:13px 16px;
  border:0;
  border-bottom:1px solid var(--line);
  background:#fff;
  text-align:left;
}
.manager-risk button span,
.manager-risk button b {
  display:block;
}
.manager-risk button b {
  margin-top:4px;
  color:var(--red);
  font-size:10px;
}
.product-admin-hub,
.commercial-library {
  margin-top:20px;
  border-radius:15px;
  overflow:hidden;
}
.product-admin-head,
.library-head {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
  padding:24px;
}
.product-admin-head h2,
.library-head h2 {
  margin:0;
  font-size:27px;
  letter-spacing:-.04em;
}
.product-admin-head p,
.library-head p {
  margin:7px 0 0;
  color:var(--muted);
}
.product-admin-list {
  display:grid;
}
.product-admin-list article {
  display:grid;
  grid-template-columns:100px minmax(0,1fr) auto auto;
  gap:13px;
  align-items:center;
  padding:12px;
  border-top:1px solid var(--line);
}
.product-admin-list img {
  width:100px;
  height:58px;
  object-fit:cover;
  border-radius:8px;
}
.product-admin-list strong,
.product-admin-list small {
  display:block;
}
.product-admin-list small {
  margin-top:4px;
  color:var(--muted);
}
.template-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
}
.template-grid article {
  display:flex;
  flex-direction:column;
  min-height:270px;
  padding:20px;
  background:#fff;
}
.template-grid article>span {
  font-size:9px;
  font-weight:900;
  color:#8a7000;
  text-transform:uppercase;
}
.template-grid h3 {
  margin:9px 0;
}
.template-grid p {
  color:var(--muted);
  line-height:1.5;
}
.template-grid .button {
  margin-top:auto;
}
.objection-library {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:24px;
  padding:24px;
  background:#111;
  color:#fff;
}
.objection-library .eyeline {
  color:var(--yellow);
}
.objection-library h3 {
  margin:0;
}
.objection-library ol {
  margin:0;
  padding-left:22px;
  color:#ccc;
  line-height:1.9;
}
.resource-cards {
  gap:12px;
  padding:14px;
  background:rgba(255,255,255,.38);
}
.resource-card {
  grid-template-columns:142px minmax(0,1fr);
  min-height:250px;
  padding:14px;
  border:1px solid rgba(110,110,100,.15)!important;
  border-radius:13px;
  box-shadow:var(--bevel);
}
.resource-visual {
  width:142px;
  height:100%;
  min-height:220px;
  object-fit:cover;
  border-radius:10px;
  background:#ffe579;
}
.resource-card>div {
  padding:12px 9px;
}
.training-banner {
  position:relative;
  overflow:hidden;
  margin:0 14px 14px;
  min-height:210px;
  border-radius:13px;
  background:#060706;
  color:#fff;
}
.training-banner>div {
  position:relative;
  z-index:2;
  width:58%;
  padding:28px;
}
.training-banner span {
  display:inline-flex;
  padding:5px 8px;
  border-radius:5px;
  background:var(--yellow);
  color:#111;
  font-size:9px;
  font-weight:900;
}
.training-banner h3 {
  margin:11px 0 5px;
  font-size:25px;
}
.training-banner p {
  color:#bbb;
}
.training-banner img {
  position:absolute;
  inset:0 0 0 auto;
  width:54%;
  height:100%;
  object-fit:cover;
  opacity:.64;
  mask-image:linear-gradient(90deg,transparent,#000 35%);
}
.handoff-standard {
  display:grid;
  grid-template-columns:1fr 85px 1fr;
  gap:12px;
  align-items:center;
  margin-top:17px;
}
.handoff-standard>div {
  padding:17px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.handoff-standard>div span,
.handoff-standard>div strong {
  display:block;
}
.handoff-standard>div span {
  font-size:9px;
  font-weight:900;
  color:#8b7000;
}
.handoff-standard>div strong {
  margin:7px 0;
}
.handoff-standard>div p {
  margin:0;
  color:var(--muted);
  font-size:11px;
}
.handoff-standard>b {
  text-align:center;
  padding:12px 4px;
  border-radius:99px;
  background:#111;
  color:var(--yellow);
}
.responsibility-warning {
  margin-top:14px;
  padding:16px;
  border-radius:9px;
  border-left:5px solid var(--red);
  background:#fff0ee;
}
.responsibility-warning p {
  margin:5px 0 0;
  color:#6a3b37;
  font-size:11px;
}
.product-form {
  width:min(1080px,calc(100vw - 30px));
}
.product-editor-layout {
  display:grid;
  grid-template-columns:320px 1fr;
  gap:20px;
  padding:22px;
}
.product-image-editor {
  display:grid;
  align-content:start;
  gap:10px;
}
.product-image-editor img {
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:12px;
  background:#eee;
  box-shadow:var(--bevel);
}
.product-image-editor label {
  display:flex;
  justify-content:center;
}
.product-image-editor input {
  display:none;
}
.product-image-editor small {
  text-align:center;
  color:var(--muted);
}
.product-detail-dialog {
  width:min(920px,calc(100vw - 30px));
}
.product-detail-hero {
  position:relative;
  min-height:330px;
  overflow:hidden;
  color:#fff;
}
.product-detail-hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,4,3,.95),rgba(3,4,3,.32));
}
.product-detail-hero>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.product-detail-hero>.icon-button {
  position:absolute;
  z-index:3;
  right:17px;
  top:17px;
}
.product-detail-hero>div {
  position:absolute;
  z-index:2;
  left:28px;
  right:28px;
  bottom:25px;
  max-width:620px;
}
.product-detail-hero span {
  color:var(--yellow);
  font-size:9px;
  font-weight:900;
}
.product-detail-hero h2 {
  margin:9px 0;
  font-size:39px;
  letter-spacing:-.05em;
}
.product-detail-hero p {
  font-size:16px;
}
.product-detail-body {
  display:grid;
  grid-template-columns:1fr 330px;
  gap:18px;
}
.product-story {
  display:grid;
  gap:11px;
}
.product-story section {
  padding:16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.product-story span,
.product-earning span {
  font-size:9px;
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
}
.product-story p {
  line-height:1.55;
}
.product-earning {
  padding:18px;
  border-radius:12px;
  background:#111;
  color:#fff;
  align-self:start;
}
.product-earning>div {
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid #ffffff1f;
}
.product-earning .total {
  color:var(--yellow);
  font-size:16px;
}
.product-earning label {
  margin-top:15px;
  color:#bbb;
}
.product-earning p {
  padding:12px;
  border-radius:8px;
  background:#ffffff12;
}
.product-earning small {
  color:#aaa;
  line-height:1.45;
}
.sim-result-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.sim-result-head strong {
  margin-bottom:14px;
}
.sim-confidence {
  align-self:start;
  padding:6px 8px;
  border-radius:99px;
  background:#333;
  font-size:9px;
  font-weight:900;
}
.sim-confidence.confirmed {
  background:#e5f5eb;
  color:#176c3b;
}
.scenario-insights {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:15px;
}
.scenario-insights>div {
  padding:10px;
  border-radius:8px;
  background:#ffffff0e;
}
.scenario-insights span,
.scenario-insights b {
  display:block;
}
.scenario-insights span {
  font-size:9px;
  color:#aaa;
}
.scenario-insights b {
  margin-top:5px;
  color:#fff;
}
.proposal-template-rail {
  margin-bottom:18px;
  padding:20px;
  border:1px solid var(--glass-line);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,245,240,.78));
  box-shadow:var(--deep-shadow);
}
.profile-contact-field {
  max-width:360px;
  margin:18px auto 0;
  text-align:left;
}
.profile-contact-field small {
  color:var(--muted);
  font-weight:500;
  line-height:1.45;
}
.proposal-template-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
  margin-bottom:14px;
}
.proposal-template-heading span,
.proposal-template-heading strong {
  display:block;
}
.proposal-template-heading span {
  font-size:9px;
  letter-spacing:.16em;
  font-weight:900;
  color:#8a7000;
}
.proposal-template-heading strong {
  margin-top:5px;
  font-size:19px;
}
.proposal-template-heading>small {
  color:var(--muted);
  font-size:10px;
}
.proposal-template-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.proposal-package-card {
  display:flex;
  flex-direction:column;
  min-height:250px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  box-shadow:inset 0 1px 0 #fff,0 7px 18px #0000000a;
}
.proposal-package-card.featured {
  background:#111;
  color:#fff;
  border-color:#111;
}
.proposal-package-card>span {
  font-size:9px;
  letter-spacing:.16em;
  font-weight:900;
  color:#8a7000;
}
.proposal-package-card.featured>span {
  color:var(--yellow);
}
.proposal-package-card h3 {
  margin:10px 0 6px;
  font-size:20px;
  letter-spacing:-.035em;
}
.proposal-package-card>strong {
  font-size:23px;
}
.proposal-package-card>strong small {
  font-size:10px;
  font-weight:650;
  color:var(--muted);
}
.proposal-package-card.featured>strong small {
  color:#aaa;
}
.proposal-package-card p {
  min-height:66px;
  margin:13px 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}
.proposal-package-card.featured p {
  color:#bbb;
}
.proposal-package-card .button {
  margin-top:auto;
  width:100%;
}
.proposal-dialog {
  width:min(1160px,calc(100vw - 30px));
  max-width:none;
}
.quote-form {
  width:100%;
  height:min(92vh,940px);
  display:flex;
  flex-direction:column;
}
.quote-form>header {
  flex:0 0 auto;
}
.quote-dialog-scroll {
  overflow:auto;
  padding:0 24px 24px;
}
.proposal-builder-step {
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.proposal-builder-step:last-child {
  border-bottom:0;
}
.proposal-step-title {
  display:flex;
  gap:13px;
  align-items:center;
  margin-bottom:16px;
}
.proposal-step-title>b {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:8px;
  background:#111;
  color:var(--yellow);
  font-size:12px;
}
.proposal-step-title strong,
.proposal-step-title small {
  display:block;
}
.proposal-step-title strong {
  font-size:16px;
}
.proposal-step-title small {
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}
.proposal-template-picker {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.proposal-template-button {
  padding:13px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  text-align:left;
}
.proposal-template-button span,
.proposal-template-button strong,
.proposal-template-button small {
  display:block;
}
.proposal-template-button span {
  font-size:8px;
  letter-spacing:.12em;
  color:#8a7000;
  font-weight:900;
}
.proposal-template-button strong {
  margin:7px 0 5px;
}
.proposal-template-button small {
  color:var(--muted);
  font-size:9px;
}
.proposal-template-button.active {
  background:#111;
  color:#fff;
  border-color:var(--yellow);
  box-shadow:inset 0 0 0 2px var(--yellow);
}
.proposal-template-button.active span {
  color:var(--yellow);
}
.proposal-template-button.active small {
  color:#bbb;
}
.quote-form textarea {
  min-height:96px;
}
.quote-form footer {
  flex:0 0 auto;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
}
[data-retainer-sim] {
  transition:opacity .16s ease;
}
[data-retainer-sim].is-disabled {
  opacity:.42;
}
.simulation-schedule {
  margin-top:15px;
  border:1px solid #ffffff22;
  border-radius:9px;
  overflow:hidden;
}
.simulation-schedule summary {
  padding:12px 14px;
  color:var(--yellow);
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.simulation-schedule>div {
  overflow-x:auto;
  padding:0 12px 12px;
}
.simulation-schedule table {
  min-width:520px;
}
.simulation-schedule th {
  padding:8px 6px;
  border-bottom:1px solid #ffffff22;
  color:#aaa;
  font-size:8px;
  text-align:right;
  text-transform:uppercase;
}
.simulation-schedule th:first-child,
.simulation-schedule td:first-child {
  text-align:left;
}
.simulation-schedule td {
  padding:8px 6px;
  font-size:9px;
}
@media(max-width:1260px) {
  .resource-card {
    grid-template-columns:120px 1fr;
  }
  .resource-visual {
    width:120px;
  }
  .template-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .product-detail-body {
    grid-template-columns:1fr 300px;
  }
  .manager-grid {
    grid-template-columns:1fr;
  }
  .today-grid {
    grid-template-columns:minmax(0,1fr) 310px;
  }
}
@media(max-width:980px) {
  .command-deck,
  .today-grid,
  .product-detail-body {
    grid-template-columns:1fr;
  }
  .pipeline-intelligence {
    grid-template-columns:repeat(2,1fr);
  }
  .pipeline-intelligence>p {
    grid-column:1/-1;
  }
  .workspace-columns,
  .product-editor-layout {
    grid-template-columns:1fr;
  }
  .client-facts {
    grid-template-columns:repeat(2,1fr);
  }
  .gate-list {
    grid-template-columns:1fr;
  }
  .resource-card {
    grid-template-columns:150px 1fr;
  }
  .resource-visual {
    width:150px;
  }
  .handoff-standard {
    grid-template-columns:1fr;
  }
  .handoff-standard>b {
    justify-self:center;
  }
  .review-ledger article {
    grid-template-columns:1fr auto;
  }
  .manager-scoreboard {
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:760px) {
  .topbar {
    margin:0 -14px;
    padding:15px 14px;
  }
  .launch-track {
    grid-auto-columns:minmax(88vw,1fr);
  }
  .launch-card {
    min-height:330px;
  }
  .launch-card:after {
    background:linear-gradient(0deg,rgba(3,4,3,.96),rgba(3,4,3,.25));
  }
  .launch-overlay {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:21px;
  }
  .launch-overlay h3 {
    font-size:25px;
  }
  .launch-rail-head,
  .command-heading,
  .product-admin-head,
  .library-head {
    align-items:stretch;
    flex-direction:column;
  }
  .command-deck {
    display:block;
  }
  .agenda-row {
    grid-template-columns:30px 1fr auto;
  }
  .task-snooze {
    grid-column:2;
  }
  .daily-hero {
    grid-template-columns:1fr;
  }
  .daily-score {
    width:100%;
    height:86px;
  }
  .completed-strip {
    grid-template-columns:1fr;
  }
  .pipeline-intelligence {
    grid-template-columns:1fr 1fr;
  }
  .pipeline-intelligence>div {
    padding:13px;
  }
  .workspace-dialog {
    width:100vw;
    max-width:100vw;
    max-height:100vh;
    margin:0;
    border-radius:0;
  }
  .workspace-form {
    max-height:100vh;
  }
  .workspace-scroll {
    padding:14px;
  }
  .client-facts {
    grid-template-columns:1fr;
  }
  .quote-summary,
  .review-summary,
  .manager-scoreboard {
    grid-template-columns:1fr 1fr;
  }
  .quote-summary>p {
    grid-column:1/-1;
  }
  .lifecycle-rail {
    overflow-x:auto;
    grid-template-columns:repeat(7,minmax(62px,1fr));
  }
  .review-ledger article {
    grid-template-columns:1fr;
  }
  .product-admin-list article {
    grid-template-columns:74px 1fr;
  }
  .product-admin-list img {
    width:74px;
    height:54px;
  }
  .template-grid {
    grid-template-columns:1fr;
  }
  .objection-library {
    grid-template-columns:1fr;
  }
  .resource-card {
    grid-template-columns:96px 1fr;
  }
  .resource-visual {
    width:96px;
    min-height:170px;
  }
  .training-banner>div {
    width:100%;
    padding:22px;
  }
  .training-banner img {
    width:100%;
    opacity:.25;
    mask-image:none;
  }
  .product-editor-layout {
    padding:15px;
  }
  .product-detail-hero {
    min-height:390px;
  }
  .product-detail-hero h2 {
    font-size:31px;
  }
  .product-detail-body {
    grid-template-columns:1fr;
  }
  .scenario-insights {
    grid-template-columns:1fr;
  }
}
@media(max-width:1260px) {
  .proposal-template-grid {
    grid-template-columns:repeat(3,1fr);
  }
}
@media(max-width:980px) {
  .proposal-template-grid,
  .proposal-template-picker {
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:760px) {
  .proposal-template-heading {
    align-items:start;
    flex-direction:column;
  }
  .proposal-template-grid,
  .proposal-template-picker {
    grid-template-columns:1fr;
  }
  .proposal-package-card {
    min-height:0;
  }
  .proposal-package-card p {
    min-height:0;
  }
  .proposal-dialog {
    width:100vw;
    max-width:100vw;
    max-height:100vh;
    margin:0;
    border-radius:0;
  }
  .quote-form {
    height:100vh;
  }
  .quote-dialog-scroll {
    padding:0 15px 18px;
  }
}

/* ==========================================================================
   V6 · Sistema de diseño unificado
   Escala de espacio, radios, superficies liquid glass y correcciones de
   simetría. Esta capa normaliza lo que las versiones anteriores dejaron
   con valores sueltos (paddings de 14 a 34px, radios de 7 a 18px y tres
   anchos distintos de columna lateral).
   ========================================================================== */

:root {
  /* Escala de espacio: base 4px. Todo margen o padding estructural sale de aquí. */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-7:32px;
  --s-8:40px;
  --s-9:56px;

  /* Escala de radios */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:24px;
  --r-pill:999px;

  /* Una sola anchura para todas las columnas laterales */
  --rail:340px;
  --gutter:var(--s-5);

  /* Superficie liquid glass clara */
  --surface-tint:rgba(255,255,255,.72);
  --surface-veil:linear-gradient(155deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.62) 42%,rgba(246,246,242,.58) 100%);
  --surface-edge:rgba(255,255,255,.9);
  --surface-hairline:rgba(96,96,86,.16);
  --surface-blur:saturate(178%) blur(22px);
  --lift-1:0 1px 2px rgba(24,26,20,.05),0 6px 16px rgba(24,26,20,.05);
  --lift-2:0 2px 4px rgba(24,26,20,.05),0 14px 34px rgba(24,26,20,.07);
  --lift-3:0 4px 8px rgba(24,26,20,.06),0 28px 62px rgba(24,26,20,.10);
  --inner-top:inset 0 1px 0 rgba(255,255,255,.94);
  --inner-bottom:inset 0 -1px 0 rgba(40,42,34,.06);

  /* Superficie liquid glass oscura */
  --dark-veil:linear-gradient(158deg,#262824 0%,#141613 44%,#080a07 100%);
  --dark-edge:rgba(255,255,255,.13);
  --dark-inner:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.4);

  /* Tipografía */
  --t-display:clamp(30px,3.1vw,40px);
  --t-title:clamp(21px,1.8vw,26px);
  --t-heading:17px;
  --t-body:14px;
  --t-small:12px;
  --t-micro:10px;
  --tracking-eyeline:.14em;
}

/* --------------------------------------------------------------------------
   Marca: el logotipo toma el color del texto del contenedor.
   Fondo oscuro → logotipo blanco. Fondo claro → logotipo negro.
   Nunca lleva placa, recuadro ni fondo propio.
   -------------------------------------------------------------------------- */
.brand-mark {
  display:block;
  aspect-ratio:1918/470;
  background-color:currentColor;
  -webkit-mask:url(assets/logo-mygenie.svg) no-repeat center/contain;
  mask:url(assets/logo-mygenie.svg) no-repeat center/contain;
}
.brand-mark--auth {
  width:min(330px,72%);
  margin-bottom:var(--s-9);
  color:#fff;
}
.brand-mark--sidebar {
  width:150px;
  color:#fff;
}
.sidebar-logo {
  height:auto;
  padding:var(--s-2) var(--s-2) var(--s-6);
}
.auth-brand {
  color:#fff;
}

/* --------------------------------------------------------------------------
   Ritmo general
   -------------------------------------------------------------------------- */
main {
  padding:0 var(--s-7) var(--s-9);
}
.topbar {
  margin:0 calc(var(--s-7) * -1);
  padding:0 var(--s-7);
  height:88px;
}
.demo-ribbon {
  margin:0 calc(var(--s-7) * -1);
  padding:0 var(--s-7);
}
.view {
  padding-top:var(--s-6);
}
.section-head {
  margin-bottom:var(--s-5);
  gap:var(--s-5);
}

/* --------------------------------------------------------------------------
   Superficie liquid glass
   Un solo recipiente visual para todos los bloques de contenido: velo
   translúcido, filo superior especular, sombra en dos capas y brillo
   diagonal muy tenue.
   -------------------------------------------------------------------------- */
.panel,
.resource-rail,
.performance-setup,
.performance-hero,
.responsibility-map,
.quote-summary,
.pipeline-intelligence,
.weekly-card,
.alert-stack,
.product-admin-hub,
.commercial-library,
.commission-workflow,
.manager-scoreboard,
.daily-hero,
.completed-strip,
.command-deck,
.proposal-template-rail,
.integration-center,
.feed-card {
  position:relative;
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-lg);
  background-image:var(--surface-veil);
  background-color:var(--surface-tint);
  -webkit-backdrop-filter:var(--surface-blur);
  backdrop-filter:var(--surface-blur);
  box-shadow:var(--inner-top),var(--inner-bottom),var(--lift-2);
}
.panel::after,
.performance-hero::after,
.command-deck::after,
.daily-hero::after,
.feed-card::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(128deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%);
  pointer-events:none;
  z-index:0;
}
.panel > *,
.performance-hero > *,
.command-deck > *,
.daily-hero > *,
.feed-card > * {
  position:relative;
  z-index:1;
}

/* Superficies oscuras: dejan de ser un rectángulo plano y ganan profundidad. */
.next-level,
.confirmed-card,
.sim-result,
.culture-reminder,
.resource-hero,
.product-launch-rail,
.handoff-standard,
.responsibility-warning.is-dark {
  background-image:var(--dark-veil);
  border:1px solid var(--dark-edge);
  box-shadow:var(--dark-inner),var(--lift-3);
}

/* --------------------------------------------------------------------------
   Simetría de rejillas: una sola anchura de columna lateral en toda la app
   -------------------------------------------------------------------------- */
.dashboard-grid,
.commission-layout,
.sim-layout,
.profile-layout,
.performance-layout {
  grid-template-columns:minmax(0,1fr) var(--rail);
  gap:var(--gutter);
  align-items:stretch;
}
.dashboard-grid > *,
.commission-layout > *,
.sim-layout > *,
.profile-layout > * {
  min-width:0;
}

/* --------------------------------------------------------------------------
   Panel: cabecera, cuerpo y pie con el mismo ritmo interno
   -------------------------------------------------------------------------- */
.panel-head {
  padding:var(--s-5) var(--s-5);
  border-bottom:1px solid var(--surface-hairline);
  gap:var(--s-4);
}
.panel-head h3 {
  font-size:var(--t-heading);
  letter-spacing:-.02em;
}
.panel-body {
  padding:var(--s-5);
}
.source-foot {
  padding:var(--s-3) var(--s-5);
  border-top:1px solid var(--surface-hairline);
}

/* --------------------------------------------------------------------------
   Controles
   -------------------------------------------------------------------------- */
.button {
  min-height:42px;
  padding:0 var(--s-4);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  border-radius:var(--r-sm);
  font-size:13px;
  line-height:1;
}
.button.secondary {
  background-image:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,248,244,.82));
  border:1px solid var(--surface-hairline);
  box-shadow:var(--inner-top),var(--lift-1);
}
.button.secondary:hover:not(:disabled) {
  border-color:rgba(96,96,86,.3);
  box-shadow:var(--inner-top),var(--lift-2);
}
.compact-button {
  min-height:34px;
  padding:0 var(--s-3);
  font-size:11px;
}
.icon-button {
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);
  border:1px solid var(--surface-hairline);
}
input,
select,
textarea {
  border-radius:var(--r-xs);
}
:focus-visible {
  outline:2px solid var(--yellow);
  outline-offset:2px;
}
.button:focus-visible {
  outline-offset:3px;
}

/* --------------------------------------------------------------------------
   Medidor de desempeño
   Antes el 70% del riel era rojo, así que cualquier resultado parecía
   deficiente. Ahora las tres bandas se leen como un termómetro continuo
   y la aguja se acompaña de su banda activa.
   -------------------------------------------------------------------------- */
.level-track {
  height:14px;
  border-radius:var(--r-pill);
  background:rgba(20,22,18,.08);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.12);
  overflow:visible;
}
.level-track .zone {
  opacity:.9;
}
.level-track .zone-red {
  background:linear-gradient(90deg,#d9564f,#c43831);
  border-radius:var(--r-pill) 0 0 var(--r-pill);
}
.level-track .zone-green {
  background:linear-gradient(90deg,#2aa863,#18854a);
}
.level-track .zone-blue {
  background:linear-gradient(90deg,#2f83f0,#1055b8);
  border-radius:0 var(--r-pill) var(--r-pill) 0;
}
.level-track b {
  top:-7px;
  width:4px;
  height:28px;
  border-radius:var(--r-pill);
  background:#0e0f0c;
  box-shadow:0 0 0 3px #fff,0 4px 12px rgba(0,0,0,.28);
}
.level-track b span {
  bottom:36px;
  padding:5px 9px;
  border-radius:var(--r-xs);
  font-weight:800;
  box-shadow:var(--lift-2);
}
.level-board {
  padding:var(--s-6);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.5);
}
.earning-trio {
  margin-top:var(--s-7);
  border-radius:var(--r-md);
  border-color:var(--surface-hairline);
  background:var(--surface-hairline);
}
.earning-trio > div {
  padding:var(--s-4);
  background:rgba(255,255,255,.86);
}

/* Héroe de desempeño: mismo padding en las dos columnas y misma altura. */
.performance-hero {
  padding:var(--s-6);
  border-left:6px solid var(--tone);
}
.performance-layout {
  margin-top:var(--s-6);
}
.next-level {
  padding:var(--s-6);
  border-radius:var(--r-md);
}
.future-note {
  margin-top:var(--s-5);
  padding:var(--s-4) var(--s-5);
  border-radius:var(--r-md);
}
.performance-setup {
  padding:var(--s-7);
  border-radius:var(--r-lg);
  border-left:6px solid var(--yellow);
}

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
.finance-table th,
.finance-table td,
.data-table th,
.data-table td {
  padding:var(--s-3) var(--s-5);
  border-bottom:1px solid rgba(96,96,86,.12);
}
.data-table thead th {
  background:rgba(255,255,255,.55);
  position:sticky;
  top:0;
  z-index:1;
}
.data-table tbody tr:hover > td {
  background:rgba(255,255,255,.6);
}
.finance-table tr.total td,
.calculation-table tr.total td {
  background:rgba(20,22,18,.045);
}

/* --------------------------------------------------------------------------
   Barra lateral
   -------------------------------------------------------------------------- */
.sidebar {
  padding:var(--s-6) var(--s-3);
}
.sidebar nav button {
  border-radius:var(--r-sm);
  padding:0 var(--s-3);
  min-height:44px;
}
.sidebar nav button.active {
  background:linear-gradient(135deg,rgba(242,197,0,.2),rgba(242,197,0,.07));
  border-color:rgba(242,197,0,.32);
  color:var(--yellow);
}
.sidebar-profile {
  border-top:1px solid rgba(255,255,255,.1);
  padding:var(--s-4) var(--s-2);
}

/* --------------------------------------------------------------------------
   Diálogos
   -------------------------------------------------------------------------- */
dialog {
  border-radius:var(--r-lg);
}
.dialog-form > .form-grid {
  padding:var(--s-6);
  gap:var(--s-4);
}
.dialog-form header,
.contract-builder > header,
.workspace-form > header {
  padding:var(--s-5) var(--s-6);
}
.dialog-form footer {
  padding:var(--s-4) var(--s-6);
  gap:var(--s-3);
}

/* --------------------------------------------------------------------------
   Barras de desplazamiento discretas
   -------------------------------------------------------------------------- */
.table-scroll::-webkit-scrollbar,
.kanban-shell::-webkit-scrollbar {
  width:10px;
  height:10px;
}
.table-scroll::-webkit-scrollbar-thumb,
.kanban-shell::-webkit-scrollbar-thumb {
  border:3px solid transparent;
  border-radius:var(--r-pill);
  background:rgba(60,62,52,.28);
  background-clip:content-box;
}
.table-scroll::-webkit-scrollbar-track,
.kanban-shell::-webkit-scrollbar-track {
  background:transparent;
}

@media(max-width:980px) {
  main {
    padding:0 var(--s-4) var(--s-8);
  }
  .topbar,
  .demo-ribbon {
    margin:0 calc(var(--s-4) * -1);
    padding:0 var(--s-4);
  }
  .dashboard-grid,
  .commission-layout,
  .sim-layout,
  .profile-layout,
  .performance-layout {
    grid-template-columns:minmax(0,1fr);
  }
}

/* ==========================================================================
   V6 · Resumen: tablero de avance real
   ========================================================================== */

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.link-button {
  border:0;
  background:none;
  padding:0;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
.link-button:hover {
  color:var(--ink);
}

/* Aro de puntaje ------------------------------------------------------- */
.performance-identity {
  display:flex;
  align-items:center;
  gap:var(--s-5);
  min-width:0;
}
.score-dial {
  --dial:0;
  --dial-tone:var(--tone,#18854a);
  flex:0 0 auto;
  width:96px;
  height:96px;
  display:grid;
  place-items:center;
  border-radius:var(--r-pill);
  background:conic-gradient(var(--dial-tone) calc(var(--dial) * 1%),rgba(20,22,18,.09) 0);
  box-shadow:var(--lift-1);
}
.score-dial > div {
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);
  box-shadow:var(--inner-top);
}
.score-dial strong {
  font-size:27px;
  line-height:1;
  letter-spacing:-.05em;
  color:var(--dial-tone);
}
.score-dial span {
  font-size:10px;
  font-weight:800;
  color:var(--muted);
}
.performance-hero.tone-red .score-dial {
  --dial-tone:#c43831;
}
.performance-hero.tone-blue .score-dial {
  --dial-tone:#1769e0;
}

/* Cinta de salud comercial ---------------------------------------------- */
.health-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s-3);
  margin-bottom:var(--s-5);
}
.health-cell {
  display:grid;
  gap:var(--s-2);
  padding:var(--s-5);
  text-align:left;
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-md);
  background-image:var(--surface-veil);
  background-color:var(--surface-tint);
  -webkit-backdrop-filter:var(--surface-blur);
  backdrop-filter:var(--surface-blur);
  box-shadow:var(--inner-top),var(--lift-1);
  transition:transform .16s ease,box-shadow .16s ease;
}
.health-cell:hover {
  transform:translateY(-2px);
  box-shadow:var(--inner-top),var(--lift-2);
}
.health-cell span {
  font-size:var(--t-micro);
  font-weight:900;
  letter-spacing:var(--tracking-eyeline);
  text-transform:uppercase;
  color:var(--muted);
}
.health-cell strong {
  font-size:25px;
  letter-spacing:-.045em;
}
.health-cell small {
  color:var(--muted);
  line-height:1.45;
}

/* Columnas del resumen --------------------------------------------------- */
.dashboard-column {
  display:grid;
  gap:var(--gutter);
  align-content:start;
  min-width:0;
}

/* Embudo resumido -------------------------------------------------------- */
.stage-board .panel-body {
  display:grid;
  gap:var(--s-1);
}
.stage-row {
  display:grid;
  grid-template-columns:132px minmax(0,1fr) 96px;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-3) var(--s-2);
  border:0;
  border-radius:var(--r-sm);
  background:transparent;
  text-align:left;
}
.stage-row:hover {
  background:rgba(255,255,255,.66);
}
.stage-name {
  font-weight:750;
  font-size:12px;
}
.stage-bar {
  display:block;
  height:10px;
  border-radius:var(--r-pill);
  background:rgba(20,22,18,.07);
  overflow:hidden;
}
.stage-bar i {
  display:block;
  height:100%;
  min-width:3px;
  border-radius:inherit;
  background:linear-gradient(90deg,#ffdc4a,var(--yellow));
}
.stage-figures {
  text-align:right;
}
.stage-figures b {
  display:block;
  font-size:16px;
  letter-spacing:-.03em;
}
.stage-figures small {
  color:var(--muted);
  font-size:10px;
}

/* Desglose de criterios -------------------------------------------------- */
.metric-table td small {
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-weight:500;
}
.metric-table .metric-weight,
.metric-table .metric-value {
  text-align:right;
  font-weight:850;
  white-space:nowrap;
}
.metric-table .metric-value {
  font-size:15px;
}
.metric-table .metric-note {
  color:var(--muted);
  line-height:1.5;
  min-width:230px;
}
.metric-empty {
  color:var(--muted);
  font-weight:600;
  font-size:11px;
}
.origin-tag {
  display:inline-flex;
  padding:4px 9px;
  border-radius:var(--r-pill);
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.origin-tag.auto {
  background:#e4f5ea;
  color:#176c3b;
}
.origin-tag.manual {
  background:#fff2c9;
  color:#6c5400;
}

/* Sugerencias ------------------------------------------------------------ */
.suggestion-list {
  display:grid;
}
.suggestion {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid rgba(96,96,86,.12);
}
.suggestion:last-child {
  border-bottom:0;
}
.suggestion > i {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
  font-style:normal;
  font-weight:900;
  font-size:14px;
}
.suggestion.tone-red > i {
  background:#fdecea;
  color:#a92a24;
}
.suggestion.tone-yellow > i {
  background:#fff3cd;
  color:#6c5400;
}
.suggestion.tone-blue > i {
  background:#e7f0ff;
  color:#1055b8;
}
.suggestion.tone-green > i {
  background:#e4f5ea;
  color:#176c3b;
}
.suggestion strong {
  display:block;
  font-size:13px;
  line-height:1.35;
}
.suggestion p {
  margin:6px 0 10px;
  color:var(--muted);
  line-height:1.55;
  font-size:12px;
}

/* Bitácora y comentarios -------------------------------------------------- */
.comment-box {
  display:grid;
  gap:var(--s-2);
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid rgba(96,96,86,.12);
}
.comment-box textarea {
  min-height:62px;
  border-radius:var(--r-sm);
}
.comment-actions {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-2);
}
.feed-list {
  max-height:520px;
  overflow-y:auto;
}
.feed-row {
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  gap:var(--s-3);
  align-items:start;
  padding:var(--s-3) var(--s-5);
  border-bottom:1px solid rgba(96,96,86,.1);
}
.feed-row:last-child {
  border-bottom:0;
}
.feed-row > i {
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:var(--r-pill);
  background:rgba(20,22,18,.06);
  font-style:normal;
  font-weight:800;
  font-size:12px;
  color:var(--ink);
}
.feed-row.kind-payment > i {
  background:#e4f5ea;
  color:#176c3b;
}
.feed-row.kind-comment > i {
  background:#fff3cd;
  color:#6c5400;
  line-height:1.9;
}
.feed-row strong {
  font-size:12px;
  line-height:1.4;
}
.feed-row p {
  margin:3px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}
.feed-row small {
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
}
.feed-side {
  display:grid;
  justify-items:end;
  gap:4px;
}
.feed-side time {
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
}

@media(max-width:1240px) {
  .health-strip {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px) {
  .health-strip {
    grid-template-columns:1fr;
  }
  .performance-identity {
    flex-direction:column;
    align-items:flex-start;
  }
  .stage-row {
    grid-template-columns:96px minmax(0,1fr) 80px;
    gap:var(--s-2);
  }
  .comment-actions {
    grid-template-columns:1fr;
  }
}

/* Iconografía de navegación: un solo trazo, un solo tamaño. */
.sidebar nav button .nav-icon {
  width:20px;
  height:20px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  font-size:0;
}
.sidebar nav button .nav-icon svg {
  width:19px;
  height:19px;
  opacity:.8;
}
.sidebar nav button.active .nav-icon svg,
.sidebar nav button:hover .nav-icon svg {
  opacity:1;
}

/* Jugada del día a todo el ancho: las cifras viven en la cinta de salud. */
.command-deck--single {
  grid-template-columns:minmax(0,1fr);
}
.command-deck--single .command-main {
  padding:var(--s-5) var(--s-6);
}

/* ==========================================================================
   V6 · Pipeline: tablero con arrastrar y soltar
   ========================================================================== */

.pipeline-toolbar {
  display:grid;
  grid-template-columns:minmax(0,1fr) 200px 230px auto;
  gap:var(--s-3);
  align-items:center;
  margin-bottom:var(--s-4);
}
.pipeline-toolbar label {
  margin:0;
}
.field-search input {
  background-image:none;
}

.kanban-shell {
  padding-bottom:var(--s-3);
}
.kanban {
  display:grid;
  grid-template-columns:repeat(6,minmax(268px,1fr));
  gap:var(--s-3);
  min-width:1680px;
  border:0;
  background:transparent;
  border-radius:0;
}

/* Columna ---------------------------------------------------------------- */
.lane {
  --lane-tone:#8d8d84;
  display:flex;
  flex-direction:column;
  min-height:560px;
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:var(--surface-blur);
  backdrop-filter:var(--surface-blur);
  box-shadow:var(--inner-top),var(--lift-1);
  overflow:hidden;
  transition:opacity .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.lane:nth-child(2) {
  --lane-tone:#5b7fb8;
}
.lane:nth-child(3) {
  --lane-tone:#7a6bb5;
}
.lane:nth-child(4) {
  --lane-tone:#c79a1a;
}
.lane:nth-child(5) {
  --lane-tone:#1b8a4b;
}
.lane:nth-child(6) {
  --lane-tone:#12776e;
}
.lane-head {
  position:sticky;
  top:0;
  z-index:2;
  padding:var(--s-4) var(--s-4) var(--s-3);
  border-bottom:1px solid var(--surface-hairline);
  border-top:3px solid var(--lane-tone);
  background:rgba(253,253,251,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.lane-title {
  display:flex;
  align-items:center;
  gap:var(--s-2);
}
.lane-title b {
  font-size:13px;
  letter-spacing:-.015em;
}
.lane-count {
  min-width:22px;
  padding:2px 7px;
  border-radius:var(--r-pill);
  background:var(--lane-tone);
  color:#fff;
  font-size:10px;
  font-weight:900;
  text-align:center;
}
.lane-head small {
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10.5px;
}
.lane-reason {
  display:block;
  margin-top:6px;
  color:#a92a24;
  font-size:10px;
  font-weight:750;
  line-height:1.4;
  min-height:0;
}
.lane-cards {
  flex:1;
  display:grid;
  align-content:start;
  gap:var(--s-2);
  padding:var(--s-3);
  min-height:120px;
  max-height:64vh;
  overflow-y:auto;
  transition:background .16s ease;
}
.lane-empty {
  margin:0;
  padding:var(--s-8) var(--s-3);
  border:1px dashed rgba(96,96,86,.28);
  border-radius:var(--r-sm);
  color:#9a9a95;
  text-align:center;
  font-size:11px;
  line-height:1.5;
}
.lane-add {
  border:0;
  border-top:1px solid var(--surface-hairline);
  background:transparent;
  padding:var(--s-3);
  color:var(--muted);
  font-size:11px;
  font-weight:750;
  text-align:left;
}
.lane-add:hover {
  background:rgba(242,197,0,.14);
  color:var(--ink);
}

/* Tarjeta ---------------------------------------------------------------- */
.lead-card {
  display:grid;
  gap:var(--s-2);
  padding:var(--s-3) var(--s-3) var(--s-2);
  border:1px solid rgba(96,96,86,.16);
  border-radius:var(--r-sm);
  background:#fff;
  box-shadow:var(--inner-top),0 1px 2px rgba(24,26,20,.05);
  cursor:grab;
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease;
}
.lead-card:hover {
  border-color:rgba(96,96,86,.3);
  box-shadow:var(--inner-top),var(--lift-2);
  transform:translateY(-1px);
}
.lead-card.is-dragging {
  opacity:.45;
  cursor:grabbing;
  transform:rotate(1.4deg) scale(.98);
}
.lead-card-top {
  display:grid;
  grid-template-columns:14px minmax(0,1fr) auto;
  align-items:center;
  gap:var(--s-2);
}
.lead-grip {
  width:10px;
  height:14px;
  background-image:radial-gradient(circle,rgba(96,96,86,.5) 1px,transparent 1px);
  background-size:5px 5px;
}
.lead-card-top b {
  font-size:12.5px;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.lead-amount {
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
}
.lead-meta {
  margin:0;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.45;
}
.lead-prob {
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px;
  align-items:center;
  gap:var(--s-2);
}
.lead-prob-track {
  display:block;
  height:6px;
  border-radius:var(--r-pill);
  background:rgba(20,22,18,.08);
  overflow:hidden;
}
.lead-prob-track i {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--lane-tone),color-mix(in srgb,var(--lane-tone),#fff 42%));
}
.lead-prob b {
  font-size:11px;
  text-align:right;
  color:var(--lane-tone);
}
.lead-evidence-note {
  color:var(--muted);
  font-size:9.5px;
  line-height:1.4;
}
.lead-next {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--s-2);
  margin:0;
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r-xs);
  background:rgba(20,22,18,.045);
  font-size:10.5px;
  line-height:1.4;
}
.lead-next time {
  flex:0 0 auto;
  font-weight:850;
  white-space:nowrap;
}
.lead-next.tone-late {
  background:#fdecea;
  color:#a92a24;
}
.lead-next.tone-now {
  background:#fff3cd;
  color:#6c5400;
}
.lead-next.tone-none {
  background:#eeeeea;
  color:var(--muted);
}
.lead-card-actions {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
}
.lead-card-actions .compact-button {
  min-height:30px;
  padding:0 4px;
  font-size:10px;
}
.lead-card .stage-control {
  margin-top:2px;
  padding-top:var(--s-2);
  border-top:1px solid rgba(96,96,86,.12);
}

/* Estados de arrastre ----------------------------------------------------- */
.lane-cards.is-over {
  background:rgba(242,197,0,.16);
  box-shadow:inset 0 0 0 2px rgba(242,197,0,.55);
  border-radius:var(--r-sm);
}
body.is-dragging-lead .lane.can-drop {
  border-color:rgba(242,197,0,.6);
  box-shadow:0 0 0 2px rgba(242,197,0,.28),var(--lift-2);
}
body.is-dragging-lead .lane.cannot-drop {
  opacity:.42;
}
body.is-dragging-lead .lane.cannot-drop .lane-cards {
  cursor:not-allowed;
}

@media(max-width:1100px) {
  .pipeline-toolbar {
    grid-template-columns:1fr;
  }
}
@media(max-width:760px) {
  .kanban {
    min-width:1180px;
    grid-template-columns:repeat(6,minmax(200px,1fr));
  }
  .lead-card-actions {
    grid-template-columns:1fr;
  }
}

/* Ajuste fino del tablero: columnas algo más estrechas y una señal visible
   de que el tablero continúa hacia la derecha. */
.kanban {
  grid-template-columns:repeat(6,minmax(252px,1fr));
  min-width:1590px;
}
.lane {
  min-height:520px;
}
.kanban-shell {
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
}

/* Las dos columnas del héroe terminan a la misma altura: el desglose de
   ingresos se apoya en la base de su tarjeta. */
.level-board {
  display:flex;
  flex-direction:column;
}
.level-board .earning-trio {
  margin-top:auto;
}
.level-labels {
  margin-bottom:var(--s-5);
}

/* ==========================================================================
   V6 · Componentes que existían en el JS y nunca recibieron estilo
   Cotizaciones, catálogo comercial, documentos demo, integraciones,
   supervisión y simulador se dibujaban sin reglas propias.
   ========================================================================== */

/* Cabeceras de sección con acción a la derecha ---------------------------- */
.quote-section-intro,
.catalog-hero,
.demo-document-hero,
.integration-head,
.product-admin-head,
.library-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--s-6);
  flex-wrap:wrap;
}
.quote-section-intro,
.catalog-hero,
.demo-document-hero {
  margin-bottom:var(--s-5);
  padding:var(--s-6);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-lg);
  background-image:var(--surface-veil);
  background-color:var(--surface-tint);
  -webkit-backdrop-filter:var(--surface-blur);
  backdrop-filter:var(--surface-blur);
  box-shadow:var(--inner-top),var(--lift-1);
}
.quote-section-intro h3,
.catalog-hero h3,
.demo-document-hero h3 {
  margin:0;
  font-size:22px;
  letter-spacing:-.035em;
}
.quote-section-intro p,
.catalog-hero p,
.demo-document-hero p {
  margin:7px 0 0;
  color:var(--muted);
  max-width:640px;
  line-height:1.55;
}

/* Pestañas de cotizaciones ------------------------------------------------ */
.quote-tabs {
  display:flex;
  gap:var(--s-1);
  margin:0 0 var(--s-5);
  padding:5px;
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:var(--surface-blur);
  backdrop-filter:var(--surface-blur);
  box-shadow:var(--inner-top),var(--lift-1);
  width:max-content;
  max-width:100%;
  overflow-x:auto;
}
.quote-tabs button {
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  min-height:38px;
  padding:0 var(--s-5);
  border:0;
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--muted);
  font-size:12.5px;
  font-weight:750;
  white-space:nowrap;
}
.quote-tabs button span {
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  opacity:.7;
}
.quote-tabs button:hover {
  color:var(--ink);
}
.quote-tabs button.active {
  background:linear-gradient(160deg,#1d1f1b,#0a0b09);
  color:#fff;
  box-shadow:var(--lift-1);
}
.quote-tabs button.active span {
  color:var(--yellow);
  opacity:1;
}
.quote-view {
  display:block;
}

/* Catálogo comercial ------------------------------------------------------ */
.catalog-toolbar {
  display:grid;
  grid-template-columns:minmax(240px,340px) minmax(0,1fr);
  gap:var(--s-4);
  align-items:end;
  margin-bottom:var(--s-5);
}
.catalog-search span {
  display:block;
  margin-bottom:6px;
  font-size:var(--t-micro);
  font-weight:900;
  letter-spacing:var(--tracking-eyeline);
  text-transform:uppercase;
  color:var(--muted);
}
.catalog-filters {
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
}
.catalog-filters button {
  min-height:34px;
  padding:0 var(--s-4);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);
  font-size:11.5px;
  font-weight:750;
  color:var(--muted);
}
.catalog-filters button:hover {
  color:var(--ink);
  border-color:rgba(96,96,86,.34);
}
.catalog-filters button.active {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

.commerce-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:var(--s-4);
}
.commerce-card {
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.78);
  box-shadow:var(--inner-top),var(--lift-1);
  transition:transform .16s ease,box-shadow .16s ease;
}
.commerce-card:hover {
  transform:translateY(-2px);
  box-shadow:var(--inner-top),var(--lift-2);
}
.commerce-monogram {
  display:grid;
  place-items:center;
  height:96px;
  background:linear-gradient(150deg,#1e201c,#080907);
}
.commerce-monogram span {
  font-size:26px;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--yellow);
}
.commerce-image {
  position:relative;
  height:150px;
  overflow:hidden;
  background:#0a0b09;
}
.commerce-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.commerce-image span {
  position:absolute;
  left:var(--s-3);
  top:var(--s-3);
  padding:4px 9px;
  border-radius:var(--r-pill);
  background:var(--yellow);
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.commerce-copy {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:var(--s-4) var(--s-5) var(--s-5);
}
.commerce-copy small {
  font-size:9.5px;
  font-weight:900;
  letter-spacing:var(--tracking-eyeline);
  text-transform:uppercase;
  color:#8a7000;
}
.commerce-copy h3 {
  margin:0;
  font-size:16px;
  line-height:1.25;
  letter-spacing:-.03em;
}
.commerce-copy p {
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.commerce-copy strong {
  font-size:19px;
  letter-spacing:-.035em;
}
.commerce-copy > div {
  display:flex;
  gap:var(--s-2);
  margin-top:auto;
  padding-top:var(--s-3);
}
.commerce-copy > div .button {
  flex:1;
  min-height:36px;
  font-size:11.5px;
}
.commerce-launch .commerce-copy small {
  color:#176c3b;
}

.catalog-buybox {
  display:grid;
  gap:6px;
  padding:var(--s-5);
  border-radius:var(--r-md);
  background:linear-gradient(155deg,#1e201c,#080907);
  color:#fff;
}
.catalog-buybox span {
  font-size:var(--t-micro);
  font-weight:900;
  letter-spacing:var(--tracking-eyeline);
  text-transform:uppercase;
  color:var(--yellow);
}
.catalog-buybox strong {
  font-size:27px;
  letter-spacing:-.04em;
}
.catalog-detail-head {
  display:flex;
  justify-content:space-between;
  gap:var(--s-5);
}
.catalog-detail-body {
  display:grid;
  gap:var(--s-5);
}
.catalog-footnote,
.demo-safety,
.scope-warning {
  margin-top:var(--s-5);
  padding:var(--s-4) var(--s-5);
  border-left:4px solid var(--yellow);
  border-radius:var(--r-sm);
  background:rgba(255,249,217,.72);
}
.catalog-footnote strong,
.demo-safety strong,
.scope-warning span {
  display:block;
  margin-bottom:5px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#6c5400;
}
.catalog-footnote p,
.demo-safety p {
  margin:0;
  color:#4f4a33;
  line-height:1.55;
}
.scope-warning ul {
  margin:0;
  padding-left:18px;
  color:#4f4a33;
  line-height:1.6;
}

/* Documentos demo ---------------------------------------------------------- */
.demo-document-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:var(--s-4);
}
.demo-document-grid article {
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  padding:var(--s-5);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.78);
  box-shadow:var(--inner-top),var(--lift-1);
}
.demo-document-grid article span {
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--yellow-dark);
}
.demo-document-grid article h3 {
  margin:0;
  font-size:16px;
  letter-spacing:-.03em;
}
.demo-document-grid article p {
  margin:0 0 var(--s-3);
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.demo-document-grid article .button {
  margin-top:auto;
}

/* Integraciones ------------------------------------------------------------ */
.integration-center {
  margin-top:var(--s-5);
  padding:var(--s-6);
}
.integration-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s-4);
  margin-top:var(--s-5);
}
.integration-grid article {
  display:grid;
  gap:var(--s-3);
  align-content:start;
  padding:var(--s-5);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.74);
  box-shadow:var(--inner-top),var(--lift-1);
}
.channel-mark {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
  background:linear-gradient(150deg,#1e201c,#080907);
  color:var(--yellow);
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
}
.integration-grid article span {
  font-size:var(--t-micro);
  font-weight:900;
  letter-spacing:var(--tracking-eyeline);
  text-transform:uppercase;
  color:var(--muted);
}
.integration-grid article h3 {
  margin:5px 0 0;
  font-size:15px;
  letter-spacing:-.025em;
}
.integration-grid article p {
  margin:7px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.integration-grid article small {
  color:var(--muted);
  font-size:10.5px;
  line-height:1.5;
}

/* Supervisión --------------------------------------------------------------- */
.manager-team,
.approval-queue {
  margin-top:var(--s-5);
}
.team-ledger,
.approval-list {
  display:grid;
  gap:var(--s-2);
}
.team-ledger article,
.approval-list article {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-4) var(--s-5);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.72);
}
.team-avatar {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:var(--r-pill);
  background:var(--yellow);
  font-size:13px;
  font-weight:900;
}
.team-ledger article strong,
.approval-list article strong {
  display:block;
  font-size:13px;
}
.team-ledger article small,
.approval-list article small {
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}
.team-ledger article span {
  display:block;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
}
.team-ledger article b {
  display:block;
  margin-top:4px;
  font-size:13px;
  white-space:nowrap;
}

.automation-board {
  display:grid;
  gap:var(--s-4);
  margin-top:var(--s-5);
  padding:var(--s-5);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.62);
}
.automation-board h3 {
  margin:0;
  font-size:16px;
  letter-spacing:-.03em;
}
.automation-board > div:nth-child(2) {
  display:grid;
  gap:var(--s-2);
}

.empty-state-pro {
  display:grid;
  gap:var(--s-2);
  padding:var(--s-9) var(--s-6);
  text-align:center;
  border:1px dashed rgba(96,96,86,.3);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.55);
}
.empty-state-pro strong {
  font-size:17px;
  letter-spacing:-.03em;
}
.empty-state-pro p {
  margin:0 auto;
  max-width:480px;
  color:var(--muted);
  line-height:1.6;
}

/* Editor de productos -------------------------------------------------------- */
.editor-checklist {
  display:grid;
  gap:6px;
  padding:var(--s-4);
  border-radius:var(--r-sm);
  background:rgba(255,249,217,.72);
  border-left:4px solid var(--yellow);
}
.editor-checklist strong {
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#6c5400;
}
.editor-checklist span {
  color:#4f4a33;
  font-size:11.5px;
  font-weight:600;
}
.editor-checklist span::before {
  content:"";
  color:var(--yellow-dark);
  font-weight:900;
}

/* Simulador ------------------------------------------------------------------ */
.simulator-intro {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--s-6);
  flex-wrap:wrap;
  margin-bottom:var(--s-5);
  padding:var(--s-6);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-lg);
  background-image:var(--surface-veil);
  background-color:var(--surface-tint);
  -webkit-backdrop-filter:var(--surface-blur);
  backdrop-filter:var(--surface-blur);
  box-shadow:var(--inner-top),var(--lift-1);
}
.simulator-intro h2 {
  margin:0;
  max-width:720px;
  font-size:23px;
  line-height:1.25;
  letter-spacing:-.035em;
}
.simulator-intro p {
  margin:9px 0 0;
  max-width:660px;
  color:var(--muted);
  line-height:1.55;
}
.simulator-legend {
  display:grid;
  gap:var(--s-2);
}
.simulator-legend span {
  display:flex;
  align-items:center;
  gap:var(--s-2);
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
}
.simulator-legend i {
  width:11px;
  height:11px;
  border-radius:3px;
  background:var(--yellow);
}
.simulator-legend i.milestone {
  background:var(--green);
}
.simulator-legend i.validation {
  background:var(--blue);
}
.rule-matrix {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s-3);
  margin-top:var(--s-5);
}
.rule-matrix article {
  display:grid;
  gap:5px;
  padding:var(--s-4);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.7);
}
.rule-matrix span {
  font-size:9.5px;
  font-weight:900;
  letter-spacing:var(--tracking-eyeline);
  text-transform:uppercase;
  color:var(--muted);
}
.rule-matrix b {
  font-size:18px;
  letter-spacing:-.035em;
}
.rule-matrix small {
  color:var(--muted);
  font-size:10.5px;
  line-height:1.45;
}
.simulator-warning {
  margin-top:var(--s-5);
}

/* Detalles sueltos ------------------------------------------------------------ */
.quick-contact {
  display:grid;
  gap:var(--s-2);
  padding:var(--s-4);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.7);
}
.quick-contact span {
  font-size:9.5px;
  font-weight:900;
  letter-spacing:var(--tracking-eyeline);
  color:var(--muted);
}
.quick-contact a {
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid var(--yellow);
  width:max-content;
}
.financial-rule {
  display:block;
  margin-top:var(--s-3);
  color:var(--muted);
  font-size:9.5px;
  line-height:1.5;
}

/* Folios y etiquetas de tabla no se parten en tres renglones. */
.data-table td:first-child strong,
.payment-status,
.status-tag {
  white-space:nowrap;
}

@media(max-width:900px) {
  .catalog-toolbar {
    grid-template-columns:1fr;
  }
  .team-ledger article,
  .approval-list article {
    grid-template-columns:auto minmax(0,1fr);
    row-gap:var(--s-3);
  }
}

/* ==========================================================================
   V6 · Correcciones de simetría detectadas en revisión
   ========================================================================== */

/* Las columnas laterales dejan de estirarse hasta la altura de la más larga:
   antes el panel de controles del simulador quedaba medio vacío. */
.sim-layout,
.commission-layout,
.profile-layout {
  align-items:start;
}

/* En el resultado del simulador solo la cifra principal es gigante; el
   `strong` dentro de la explicación heredaba ese tamaño y gritaba. */
.sim-result > .sim-result-head strong,
.sim-result-head strong {
  display:block;
  font-size:32px;
  margin:0;
  color:var(--yellow);
}
.sim-result table strong,
.sim-citation strong,
.scenario-insights strong {
  display:inline;
  font-size:inherit;
  margin:0;
  color:inherit;
}
.sim-citation strong {
  color:var(--yellow);
}

/* Casillas de verificación: tamaño real de casilla, alineadas con su texto. */
.consent-line,
.check-grid label,
.confirmations label {
  display:flex;
  align-items:center;
  gap:var(--s-3);
  flex-wrap:nowrap;
  line-height:1.45;
}
.consent-line input[type="checkbox"],
.check-grid input[type="checkbox"],
.confirmations input[type="checkbox"],
.form-grid input[type="checkbox"] {
  flex:0 0 auto;
  width:17px;
  height:17px;
  min-height:0;
  margin:0;
  accent-color:var(--yellow);
}
.consent-line b {
  font-weight:800;
  white-space:nowrap;
}

/* Reglas de automatización: disparador → acción → estado, en una fila legible. */
.automation-board article {
  display:grid;
  grid-template-columns:8px minmax(0,1fr) minmax(0,1.4fr) auto;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.72);
}
.automation-board article > i {
  width:8px;
  height:8px;
  border-radius:var(--r-pill);
  background:var(--green);
}
.automation-board article > span {
  font-size:11px;
  font-weight:850;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted);
}
.automation-board article > b {
  font-size:13px;
}
.automation-board article > em {
  font-style:normal;
  padding:4px 10px;
  border-radius:var(--r-pill);
  background:#e4f5ea;
  color:#176c3b;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.automation-board > p {
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

/* Las columnas de Mi día tampoco se estiran de más. */
.today-grid {
  align-items:start;
}

/* Aviso en la tarjeta: qué falta exactamente para poder avanzarla. */
.lead-gate {
  border:1px solid rgba(214,168,0,.45);
  border-radius:var(--r-xs);
  background:rgba(255,243,205,.85);
  padding:6px var(--s-2);
  color:#6c5400;
  font-size:10px;
  font-weight:800;
  text-align:left;
}
.lead-gate:hover {
  background:var(--yellow);
  color:#3d3100;
}

/* La columna del Resumen debe poder encogerse: sin una pista explícita, la
   tabla de criterios (760px mínimos) estiraba la columna y sacaba el panel
   fuera de la pantalla en teléfono. */
.dashboard-column {
  grid-template-columns:minmax(0,1fr);
}

/* En teléfono los formularios largos miden más de 1.5 pantallas: la acción
   principal se queda fija abajo para no obligar a recorrer todo el diálogo. */
@media(max-width:760px) {
  .dialog-form footer,
  .workspace-form > footer {
    position:sticky;
    bottom:0;
    z-index:3;
    background:rgba(252,252,249,.96);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:0 -6px 18px rgba(24,26,20,.08);
  }
  .dialog-form footer .button {
    flex:1;
  }
  .dialog-form header,
  .contract-builder > header,
  .workspace-form > header {
    position:sticky;
    top:0;
    z-index:3;
    background:rgba(252,252,249,.96);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
}

/* ==========================================================================
   V6 · Respaldo y carga de datos
   ========================================================================== */

.data-transfer {
  margin-top:var(--gutter);
}
.transfer-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:var(--s-3);
  margin-top:var(--s-4);
}
.transfer-grid article {
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  padding:var(--s-5);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.74);
  box-shadow:var(--inner-top),var(--lift-1);
}
.transfer-grid strong {
  font-size:14px;
  letter-spacing:-.02em;
}
.transfer-grid p {
  margin:0 0 var(--s-3);
  color:var(--muted);
  font-size:11.5px;
  line-height:1.55;
}
.transfer-grid p b {
  color:var(--ink);
  font-weight:750;
}
.transfer-grid .upload-label,
.transfer-grid .button {
  margin-top:auto;
  width:100%;
}
.upload-label {
  position:relative;
  cursor:pointer;
}
.upload-label input[type="file"] {
  display:none;
}

/* ==========================================================================
   V6 · Botón flotante al Centro de control
   Vive abajo a la izquierda para no estorbar al toast, que ocupa la esquina
   derecha. En reposo es solo un círculo de cristal; al acercarse revela su
   nombre. Se aparta durante el tutorial para no competir con el recorrido.
   ========================================================================== */

.home-fab {
  position:fixed;
  /* Arranca donde termina la barra lateral: dentro no cabe sin tapar
     "Cerrar sesión". */
  left:calc(218px + var(--s-6));
  bottom:var(--s-6);
  z-index:90;
  display:flex;
  align-items:center;
  gap:var(--s-3);
  width:52px;
  height:52px;
  padding:0 17px;
  overflow:hidden;
  white-space:nowrap;
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--surface-hairline);
  border-radius:var(--r-pill);
  background-image:var(--surface-veil);
  background-color:rgba(255,255,255,.82);
  -webkit-backdrop-filter:var(--surface-blur);
  backdrop-filter:var(--surface-blur);
  box-shadow:var(--inner-top),var(--lift-2);
  transition:width .24s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.home-fab:hover,
.home-fab:focus-visible {
  width:214px;
  transform:translateY(-2px);
  border-color:rgba(214,168,0,.5);
  box-shadow:var(--inner-top),var(--lift-3),0 0 0 4px rgba(242,197,0,.18);
}
.home-fab-icon {
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-left:-0.5px;
  display:grid;
  place-items:center;
}
.home-fab-icon svg {
  width:18px;
  height:18px;
}
.home-fab-label {
  font-size:12.5px;
  font-weight:750;
  letter-spacing:-.01em;
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .18s ease .04s,transform .22s ease .04s;
}
.home-fab:hover .home-fab-label,
.home-fab:focus-visible .home-fab-label {
  opacity:1;
  transform:translateX(0);
}

/* Durante el recorrido guiado se retira sin desmontarse. */
body.tutorial-open .home-fab {
  opacity:0;
  pointer-events:none;
  transform:translateY(14px);
}

@media(max-width:760px) {
  .home-fab {
    left:var(--s-4);
    bottom:var(--s-4);
    width:48px;
    height:48px;
  }
  .home-fab:hover,
  .home-fab:focus-visible {
    width:48px;
  }
  .home-fab-label {
    display:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  .home-fab,
  .home-fab-label {
    transition:none;
  }
}

/* ==========================================================================
   Ventas → Postproducción
   El paquete de entregables que se manda a Post al cerrar un contrato.
   ========================================================================== */

.handoff-dialog {
  width: min(880px, calc(100% - 24px));
}
.handoff-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.handoff-grid label > span,
.handoff-brief > span {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.handoff-brief {
  display: block;
  margin-bottom: var(--s-5);
}
.handoff-add {
  margin-bottom: var(--s-4);
}
.handoff-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.handoff-preset {
  display: block;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  font: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.handoff-preset:hover {
  border-color: rgba(214, 168, 0, .55);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(30, 26, 18, .08);
}
.handoff-preset strong {
  display: block;
  font-size: 12.5px;
  letter-spacing: -.01em;
}
.handoff-preset small {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--muted);
}
.handoff-lista {
  margin-bottom: var(--s-4);
}
.handoff-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px 96px 62px 76px 84px;
  gap: var(--s-3);
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
}
.handoff-encabezado {
  border-top: 0;
  padding-bottom: 4px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.handoff-nombre input {
  width: 100%;
}
.handoff-nombre small {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--muted);
}
.handoff-res {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.handoff-vacio {
  padding: var(--s-5);
  font-size: 12px;
  line-height: 1.5;
}
.handoff-resumen {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
}

@media (max-width: 720px) {
  .handoff-grid {
    grid-template-columns: 1fr;
  }
  .handoff-fila {
    grid-template-columns: 1fr 1fr;
  }
  .handoff-encabezado {
    display: none;
  }
  .handoff-nombre {
    grid-column: 1 / -1;
  }
}

/* --- Acceso de clientes al portal ---------------------------------------- */
/* Vive al final de la vista de Clientes. El código es lo único que el
   vendedor tiene que copiar bien, así que se muestra grande y aparte. */
.portal-acceso{margin-top:34px;padding-top:28px;border-top:1px solid var(--line,rgba(0,0,0,.1))}
.portal-acceso .data-table td small{display:block;opacity:.62;font-size:11.5px;line-height:1.4;margin-top:2px}
.portal-acceso .row-actions{align-items:center}
.portal-ligar{min-width:172px;padding:7px 10px;border:1px solid var(--line,rgba(0,0,0,.18));border-radius:9px;
  background:transparent;color:inherit;font:inherit;font-size:12px;max-width:230px}
.portal-codigo{display:grid;gap:6px;justify-items:center;padding:22px;margin-bottom:18px;
  border:1px dashed var(--line,rgba(0,0,0,.2));border-radius:14px;text-align:center}
.portal-codigo span{font-size:10px;font-weight:800;letter-spacing:.09em;opacity:.55}
.portal-codigo strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(22px,4.6vw,32px);
  font-weight:700;letter-spacing:.10em}
.portal-mensaje{display:grid;gap:6px;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;opacity:.7}
.portal-mensaje textarea{width:100%;padding:12px 14px;border:1px solid var(--line,rgba(0,0,0,.18));
  border-radius:11px;background:transparent;color:inherit;font:inherit;font-size:12.5px;line-height:1.55;
  text-transform:none;letter-spacing:0;font-weight:400;resize:vertical}
.portal-acciones{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.portal-nota{margin:12px 0 0;font-size:11.5px;opacity:.6;line-height:1.5}
@media(max-width:640px){.portal-ligar{max-width:100%}}

/* --- Cotización: para quién --- */
.quote-para { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 12px; }
.quote-para-titulo { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.quote-para-opciones { display: flex; gap: 8px; flex-wrap: wrap; }
.quote-para-opciones label { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--line, rgba(0,0,0,.18)); border-radius: 999px; font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
.quote-para-opciones label:has(input:checked) { background: #111; color: #fff; border-color: #111; }
.quote-para-opciones input { accent-color: #f2c500; margin: 0; }
.quote-nuevo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 14px; border: 1px dashed var(--line, rgba(0,0,0,.2)); border-radius: 12px; }
.quote-nuevo small { grid-column: 1 / -1; font-size: 11.5px; opacity: .65; text-transform: none; letter-spacing: 0; font-weight: 500; }
.lead-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lead-footer-izq, .lead-footer-der { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lead-mover { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.lead-mover select { padding: 8px 10px; border: 1px solid rgba(0,0,0,.18); border-radius: 9px; font: inherit; font-size: 12.5px; }
.button.danger { color: #a12f22; border-color: rgba(161,47,34,.35); }
.button.danger:hover { background: rgba(161,47,34,.08); }

/* --- Mi liga de bodas, en Mi perfil ------------------------------------- */
.bodas-card .panel-head span{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.bodas-link{display:flex;gap:.5rem;margin:.9rem 0 .6rem}
.bodas-link input{flex:1;min-width:0;font-size:.82rem}
.bodas-link[hidden]{display:none}
.bodas-acciones{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}

/* --- Wedding Experience dentro del catálogo de Cotizaciones ------------- */
.bodas-producto .eyeline{display:block}
.bodas-asesor{display:flex;align-items:center;gap:1rem;margin:1rem 0 .2rem;flex-wrap:wrap}
.bodas-asesor img,.bodas-sin-foto{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none}
.bodas-sin-foto{display:grid;place-items:center;border:1px dashed currentColor;opacity:.45;font-size:.7rem;text-align:center}
.bodas-asesor strong{display:block}
.bodas-asesor small{display:block;opacity:.7;font-size:.78rem;margin-bottom:.5rem}
.bodas-foto-acciones{display:flex;flex-wrap:wrap;gap:.45rem}

/* --- Avisos dentro de una ventana modal -----------------------------------
   Un <dialog> modal se pinta en la capa superior del navegador, encima del
   toast. El aviso tiene que vivir dentro de la ventana o no se lee. */
.dialog-aviso {
  margin: 0 22px 4px;
  padding: 12px 15px;
  border-radius: 10px;
  background: rgba(111, 154, 124, .14);
  border: 1px solid rgba(111, 154, 124, .45);
  color: #2F5A41;
  font-size: 14px;
  line-height: 1.5;
}
.dialog-aviso.malo {
  background: rgba(184, 105, 90, .13);
  border-color: rgba(184, 105, 90, .5);
  color: #8C3E2E;
}
.dialog-form .campo-malo {
  border-color: #B8695A !important;
  box-shadow: 0 0 0 3px rgba(184, 105, 90, .18);
}

/* Botón de eliminar dentro de las tablas y tarjetas de Ventas. */
.button.peligro {
  border-color: rgba(184, 105, 90, .5);
  color: #9E4634;
}
.button.peligro:hover {
  background: rgba(184, 105, 90, .12);
  border-color: rgba(184, 105, 90, .8);
}


/* ===========================================================================
   Correos (Ventas → Correos) · rediseño 5 oct 2026
   ---------------------------------------------------------------------------
   Reglas que mantienen la pantalla quieta:
     · Los botones de la barra tienen ancho mínimo y no cambian de texto al
       trabajar, para que no bailen bajo el dedo.
     · El material vive en un encuadre 16:9 fijo: todas las tarjetas miden lo
       mismo aunque las imágenes tengan proporciones distintas.
     · La columna de captura y la vista previa hacen scroll por separado; la
       vista nunca empuja al formulario.
   ======================================================================== */

.co-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px; align-items: start; padding-bottom: 96px; }
.co-col { display: grid; gap: 14px; min-width: 0; }

.co-paso { background: var(--surface, #fff); border: 1px solid #D9D4C8; border-radius: 16px; overflow: hidden; }
.co-paso > header { display: flex; align-items: center; gap: 11px; padding: 15px 20px;
  border-bottom: 1px solid #D9D4C8; background: #FBFAF6; }
.co-paso > header h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.co-num { width: 25px; height: 25px; border-radius: 13px; background: #1C1B18; color: #F5B800;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.co-paso-cuerpo { padding: 18px 20px; display: grid; gap: 16px; }

.co-campo { display: grid; gap: 7px; font-size: 13px; font-weight: 600; color: #4D4A44; min-width: 0; }
.co-campo > span { font-size: 12px; letter-spacing: .03em; display: flex; align-items: baseline; gap: 7px; }
.co-campo > span em { font-style: normal; font-weight: 500; font-size: 11.5px; color: #C99B3F; }
.co-campo input, .co-campo select, .co-campo textarea {
  font: inherit; font-weight: 400; font-size: 15px; padding: 11px 13px; border: 1px solid #D9D4C8;
  border-radius: 10px; background: #fff; color: #1C1B18; width: 100%; box-sizing: border-box; }
.co-campo textarea { resize: vertical; line-height: 1.6; min-height: 110px; }
.co-campo input:focus, .co-campo select:focus, .co-campo textarea:focus {
  outline: none; border-color: #C99B3F; box-shadow: 0 0 0 3px rgba(201,155,63,.18); }
.co-ayuda { font-weight: 400; font-size: 12.5px; line-height: 1.5; color: #8B877D; margin: 0; }
.co-ayuda.malo { color: #9E4634; }
.co-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }

.co-firma { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #F4F1EA; border-radius: 12px; }
.co-firma img, .co-ini { width: 42px; height: 42px; border-radius: 21px; object-fit: cover; flex: 0 0 auto; }
.co-ini { display: grid; place-items: center; background: #1C1B18; color: #F5B800; font-weight: 700; font-size: 14px; }
.co-firma strong { display: block; font-size: 14.5px; }
.co-firma small { display: block; font-size: 12.5px; color: #8B877D; margin-top: 1px; }

.co-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.co-tipo { font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 999px;
  border: 1px solid #D9D4C8; background: #fff; color: #4D4A44; cursor: pointer; transition: none; }
.co-tipo:hover { border-color: #8B877D; }
.co-tipo.on { background: #F5B800; border-color: #D3A92F; color: #1C1B18; }

/* Servicios */
.co-cat { display: grid; gap: 15px; max-height: 330px; overflow-y: auto;
  padding: 3px; border: 1px solid #E8E4DA; border-radius: 12px; }
.co-fam h5 { margin: 0 0 7px; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #8B877D; padding: 0 9px; }
.co-sv { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: start;
  padding: 11px 13px; border-radius: 10px; cursor: pointer; font-weight: 400;
  border: 1px solid transparent; }
.co-sv:hover { background: #FBFAF6; }
.co-sv.on { background: rgba(245,184,0,.09); border-color: rgba(201,155,63,.5); }
.co-sv input { margin-top: 3px; accent-color: #C99B3F; flex: 0 0 auto; }
.co-sv-txt { min-width: 0; }
.co-sv-txt b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.co-sv-txt small { display: block; font-size: 12.5px; color: #8B877D; margin-top: 2px; line-height: 1.45; }
.co-sv-precio { font-size: 13px; color: #4D4A44; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.co-sv-precio small { display: block; font-size: 11.5px; color: #8B877D; }

/* Material · encuadre fijo para que todas midan lo mismo */
.co-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 11px;
  max-height: 340px; overflow-y: auto; padding: 3px; }
.co-mat { display: grid; gap: 7px; cursor: pointer; font-weight: 400; min-width: 0; }
.co-mat input { position: absolute; opacity: 0; pointer-events: none; }
.co-mat-marco { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px;
  overflow: hidden; background: #1C1B18; border: 2px solid transparent; }
.co-mat-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-mat-vacio { position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(245,184,0,.75); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.co-mat-tipo { position: absolute; left: 7px; bottom: 7px; padding: 3px 8px; border-radius: 5px;
  background: rgba(10,10,8,.78); color: #FBFAF6; font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; }
.co-mat-tache { position: absolute; top: 7px; right: 7px; width: 21px; height: 21px; border-radius: 11px;
  background: rgba(10,10,8,.5); border: 1.5px solid rgba(255,255,255,.65); }
.co-mat.on .co-mat-marco { border-color: #F5B800; }
.co-mat.on .co-mat-tache { background: #F5B800; border-color: #F5B800; }
.co-mat.on .co-mat-tache::after { content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #1C1B18; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.co-mat-nom { font-size: 12.5px; line-height: 1.35; color: #4D4A44;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Vista previa */
.co-previa { position: sticky; top: 16px; background: #fff; border: 1px solid #D9D4C8;
  border-radius: 16px; overflow: hidden; }
.co-previa-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px 17px; border-bottom: 1px solid #D9D4C8; background: #FBFAF6; }
.co-previa-cab strong { font-size: 14px; }
.co-previa-cab small { font-size: 12px; color: #8B877D; font-variant-numeric: tabular-nums; }
.co-previa iframe { width: 100%; height: calc(100vh - 190px); min-height: 420px; border: 0;
  display: block; background: #F4F1EA; }

/* Barra fija: lo único que no se mueve nunca */
.co-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(251,250,246,.93); border-top: 1px solid #D9D4C8;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.co-barra-dentro { max-width: 1480px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; padding: 12px 24px; }
.co-barra-info { font-size: 13.5px; color: #4D4A44; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.co-barra-info.pendiente { color: #8B877D; }
.co-barra-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.co-barra-btns .button { min-width: 112px; justify-content: center; }
.co-barra-btns .button.cargando { opacity: .55; }
.co-aviso { max-width: 1480px; margin: 0 auto; padding: 11px 24px; font-size: 13.5px; line-height: 1.5; }
.co-aviso.bien { background: rgba(111,154,124,.14); color: #2F5A41; }
.co-aviso.malo { background: rgba(184,105,90,.14); color: #8C3E2E; }

.co-alerta { padding: 14px 16px; display: grid; gap: 3px; border-left: 3px solid #C99B3F; margin-bottom: 14px; }
.co-alerta strong { font-size: 14px; }
.co-alerta span { font-size: 13px; color: #4D4A44; line-height: 1.5; }
.co-enviados { margin-top: 16px; }
.co-ajustes { margin-top: 16px; padding: 0; }
.co-ajustes > summary { padding: 16px 20px; font-size: 15px; font-weight: 600; cursor: pointer; }
.co-ajustes-cuerpo { padding: 0 20px 20px; display: grid; gap: 14px; }
.co-ajustes-cuerpo h4 { margin: 6px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #8B877D; }
.co-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.co-solo-movil { display: none; }

@media (max-width: 1080px) {
  .co-layout { grid-template-columns: 1fr; }
  .co-previa { display: none; }
  .co-solo-movil { display: inline-flex; }
  #correos.co-ver-abierta .co-col { display: none; }
  #correos.co-ver-abierta .co-previa { display: block; position: static; }
  #correos.co-ver-abierta .co-previa iframe { height: calc(100vh - 230px); }
}
@media (max-width: 640px) {
  .co-dos { grid-template-columns: 1fr; }
  .co-paso-cuerpo { padding: 15px 15px; }
  .co-barra-dentro { padding: 10px 15px; flex-wrap: wrap; }
  .co-barra-info { width: 100%; }
  .co-barra-btns { width: 100%; }
  .co-barra-btns .button { flex: 1; min-width: 0; }
  .co-mats { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .co-aviso { padding: 10px 15px; }
}