/* Centro de Operaciones · view layer over the legacy provider sheets (ui/provider-legacy.css).
   Tokens only (ui/tokens.css), no colour literals; `@layer views` wins over `legacy` without
   !important. Each block names the screen it fixes. */
@layer views {
  /* ---------- Keyboard focus: every legacy button and link of the Centro de Operaciones shows
     the same focus ring as the shared components (provider a11y audit) ---------- */
  .provider-shell :is(.primary-button, .secondary-button, .link-button, .row-action, .mide-link, .mx-link, .mx-quick-btn, .mx-kpi-go, .mx-chip-btn, .icon-close):focus-visible,
  .client-dialog :is(.primary-button, .secondary-button, .icon-close):focus-visible,
  .mide-drawer :is(.primary-button, .secondary-button, .icon-close):focus-visible { outline: 2px solid var(--mide-blue-500); outline-offset: 2px; }

  /* ---------- KPI cards: a figure that could not be read («—») is muted, not a fake 0 ---------- */
  .provider-content .mx-kpi[data-state="unavailable"] strong,
  .provider-content .mide-kpi[data-tone="slate"] strong { color: var(--mide-muted); }

  /* ---------- The icon refresh button keeps its size in a page header that stacks on phones ---------- */
  .provider-content .mide-actions > .ui-button-icon, .provider-content .mx-page-actions > .ui-button-icon { flex: 0 0 auto; width: auto; }

  /* ---------- Shared controls (provider-controls.js): the native select behind a selectMenu
     stays in the DOM for the view script but is never shown ---------- */
  .provider-content select[data-menu="on"] { display: none; }
  .provider-content .mide-field > .pv-select-menu, .provider-content .mx-filters .pv-select-menu { min-width: 0; width: 100%; }
  .provider-content .mide-field > .pv-select-menu .ui-select-menu-trigger { width: 100%; }
  .provider-content .mx-range .pv-select-menu { min-width: 168px; }

  /* ---------- Client file: blocks appended by the governed scripts (activation, audit,
     business inventory) get the same card as the other blocks of the file ---------- */
  #clientDetail > .panel {
    margin: 0 22px 14px; padding: 16px 18px;
    background: var(--mide-surface); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-lg); box-shadow: none;
    display: grid; gap: var(--mide-space-3); min-width: 0; font-size: var(--mide-text-sm); color: var(--mide-ink-2);
  }
  #clientDetail > .panel[hidden] { display: none; }
  #clientDetail > .panel p { margin: 0; overflow-wrap: anywhere; }
  #clientDetail .panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--mide-space-3); }
  #clientDetail .panel-header h3 { margin: 0; font-size: var(--mide-text-md); font-weight: var(--mide-weight-bold); color: var(--mide-heading); }
  #clientDetail .panel-note { color: var(--mide-muted); font-size: var(--mide-text-sm); }
  #clientDetail .button.secondary.compact {
    flex: 0 0 auto; font: inherit; font-size: var(--mide-text-sm); font-weight: var(--mide-weight-semibold); color: var(--mide-ink-2);
    background: var(--mide-surface); border: 1px solid var(--mide-line-2); border-radius: var(--mide-radius-sm); padding: 6px 12px; cursor: pointer;
  }
  #clientDetail .button.secondary.compact:hover { background: var(--mide-surface-hover); }
  #clientDetail .button.secondary.compact:focus-visible { outline: none; box-shadow: var(--mide-focus); }
  #clientDetail [data-state="unavailable"] > p, #clientDetail [data-state="forbidden"] > p, #clientDetail [data-state="not-migrated"] > p { color: var(--mide-muted); }

  /* Auditoría de productos: one entry per change — what, when, before → after, who. */
  #providerClientAuditBody { display: grid; gap: 0; }
  #clientDetail .provider-audit-row { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--mide-line); min-width: 0; }
  #clientDetail .provider-audit-row:first-child { border-top: 0; padding-top: 0; }
  #clientDetail .provider-audit-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--mide-space-3); }
  #clientDetail .provider-audit-head strong { color: var(--mide-heading); font-weight: var(--mide-weight-semibold); }
  #clientDetail .provider-audit-head time, #clientDetail .provider-audit-actor { color: var(--mide-muted); font-size: var(--mide-text-xs); }
  #clientDetail .provider-audit-change { overflow-wrap: anywhere; }

  /* Negocios y números de WhatsApp. */
  #providerBusinessChannelsBody { display: grid; gap: var(--mide-space-3); }
  #clientDetail .provider-business ul { margin: 4px 0 0; padding-left: 18px; }

  /* Activación del cliente: the destructive start button keeps its own outline. */
  #providerClientActivationBody { display: grid; gap: var(--mide-space-2); justify-items: start; }

  /* ---------- Onboarding and Asesores beside their side panel: the table fits its column
     (the legacy 720–760 px minimum hid «Continuar» behind a horizontal scroll) ---------- */
  .provider-content .mide-onboarding-table, .provider-content .mide-advisors-table { min-width: 0; }
  .provider-content .mide-onboarding-table .mide-person { min-width: 128px; }
  /* The eight numbered steps repeat the «7/8» bar and the detail panel beside the table. */
  .provider-content .mide-onboarding-table .mide-stepper { display: none; }

  /* ---------- Clientes: four summary cards on a phone go two by two (with the file open the
     legacy split rule kept four columns and pushed the page 20 px wider than the screen) ---------- */
  @media (max-width: 640px) {
    .provider-content .clients-panel > .summary-grid,
    .provider-content.mide-clients-split .clients-panel > .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ---------- Client file tabs: the split panel is narrow at every width, so the tabs keep their
     natural width and scroll instead of squeezing or overlapping («Onboardin», «Operació»). ---------- */
  .provider-content.mide-clients-split #clientDetail .mide-detail-tabs { overflow-x: auto; gap: 2px; scroll-padding-inline: 14px; scrollbar-width: thin; }
  .provider-content.mide-clients-split #clientDetail .mide-detail-tabs button { flex: 0 0 auto; min-width: auto; padding: 11px 10px; font-size: var(--mide-text-sm); white-space: nowrap; }
  @media (max-width: 640px) {
    #clientDetail > .panel { margin-left: 16px; margin-right: 16px; }
  }

  /* ---------- Lists of bars (Inicio, Reportes): a footnote or an empty state spans the whole
     row instead of being squeezed into the 38 px icon column ---------- */
  .provider-content .mx-bars > li.mx-more, .provider-content .mx-bars > li.mx-empty, .provider-content .mx-bars > li.mx-empty-state { display: block; grid-column: 1 / -1; }

  /* ---------- Supervisión (Operación global, Incidentes, Consumo, Auditoría): one row per
     client with the name, two facts and the action aligned to the right ---------- */
  :is(#globalOperation, #tenantSupport, #globalConsumption, #globalAudit) .member-row { grid-template-columns: minmax(120px, 1fr) minmax(0, 1.2fr) minmax(0, 1.6fr) auto; align-items: center; padding: 14px 0; }
  :is(#globalOperation, #tenantSupport, #globalConsumption, #globalAudit) .member-row > :last-child { justify-self: end; white-space: nowrap; }
  :is(#globalOperation, #tenantSupport, #globalConsumption, #globalAudit) .member-row small { color: var(--mide-muted); }
  @media (max-width: 640px) {
    :is(#globalOperation, #tenantSupport, #globalConsumption, #globalAudit) .member-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    :is(#globalOperation, #tenantSupport, #globalConsumption, #globalAudit) .member-row > :last-child { justify-self: start; }
  }

  /* ---------- Reportes: the partial-figure footnote sits under the list, full width ---------- */
  #reportsAiNote { margin: var(--mide-space-2) 0 0; color: var(--mide-muted); font-size: var(--mide-text-xs); }

  /* ---------- Tables on phones: each row is a card of «label · value» lines ----------
     Labels come from the column headers (provider-table-cards.js). The first cell is the
     card's title; a cell without label (the row action) closes the card, aligned right. */
  @media (max-width: 640px) {
    .provider-content table.pv-cards { min-width: 0; width: 100%; }
    .provider-content table.pv-cards thead { display: none; }
    .provider-content table.pv-cards, .provider-content table.pv-cards tbody { display: block; }
    .provider-content table.pv-cards tbody tr { display: grid; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--mide-line); }
    .provider-content table.pv-cards tbody tr[hidden] { display: none; }
    .provider-content table.pv-cards tbody td {
      display: flex; align-items: baseline; gap: var(--mide-space-3); min-width: 0; max-width: none;
      padding: 0; border: 0; text-align: left; width: auto; white-space: normal; overflow: visible; font-size: var(--mide-text-sm);
    }
    .provider-content table.pv-cards tbody td::before {
      content: attr(data-label); flex: 0 0 40%; min-width: 0; color: var(--mide-muted); font-size: var(--mide-text-xs); font-weight: var(--mide-weight-medium);
    }
    .provider-content table.pv-cards tbody td > * { min-width: 0; }
    .provider-content table.pv-cards tbody td:first-child { padding: 0 0 2px; }
    .provider-content table.pv-cards tbody td:first-child::before,
    .provider-content table.pv-cards tbody td[data-label=""]::before { content: none; }
    .provider-content table.pv-cards tbody td[data-label=""] { justify-content: flex-end; }
    .provider-content table.pv-cards tbody td { margin: 0; background: transparent; box-shadow: none; }
    /* The selected row is marked on the card, not cell by cell. */
    .provider-content table.pv-cards tbody tr.is-selected { background: var(--mide-blue-50); box-shadow: inset 3px 0 0 var(--mide-blue-600); }
    /* Operaciones: the whole card opens the task; the «…» shortcut is not repeated. */
    .provider-content table.pv-cards tbody tr[data-task] td:last-child { display: none; }
    .provider-content table.pv-cards tbody tr[data-card-message] { display: block; padding: 0; }
    .provider-content table.pv-cards tbody tr[data-card-message] td { display: block; padding: 32px 16px; text-align: center; }
    .provider-content table.pv-cards tbody tr[data-card-message] td::before { content: none; }
  }

  /* ---------- Productos (UX pase 2): la tabla cabe junto al panel de detalle sin columnas
     cortadas; la descripción ocupa el espacio flexible y los datos cortos no se parten. ---------- */
  .mide-products-table { min-width: 0; }
  .mide-products-table th:nth-child(n + 3), .mide-products-table td:nth-child(n + 3) { white-space: nowrap; }
  .mide-products-table td:nth-child(2) { min-width: 18ch; }
  @media (max-width: 1360px) { .mide-products-table th:nth-child(5), .mide-products-table td:nth-child(5) { display: none; } }

  /* ---------- Marca del cliente (ficha · pestaña Marca): formulario + vista previa en vivo.
     The miniature reads ONLY the custom properties that MIDE_TENANT_RULES.preview() derives, set on
     #brandPreview itself; without a valid theme it shows MIDE's own tokens. ---------- */
  /* The client file is a narrow panel: one column, the preview first so every change is seen at once. */
  .brand-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mide-space-5); margin-top: var(--mide-space-4); }
  .brand-editor > .brand-preview-frame { order: -1; }
  .brand-form { display: grid; gap: var(--mide-space-4); margin: 0; }
  .brand-field { display: grid; gap: var(--mide-space-2); }
  .brand-field > label, .brand-label { font-size: var(--mide-text-sm); font-weight: 700; color: var(--mide-ink-2); }
  .brand-field input[type="text"] { min-height: 44px; padding: 0 var(--mide-space-3); font: inherit; font-size: var(--mide-text-md); color: var(--mide-ink-900); background: var(--mide-white); border: 1px solid var(--mide-line-strong); border-radius: var(--mide-radius-sm); }
  .brand-field input[type="text"]:focus-visible { outline: none; border-color: var(--mide-focus-ring); box-shadow: var(--mide-focus); }
  .brand-field input:disabled { background: var(--mide-surface-100); color: var(--mide-muted); }
  .brand-hint { margin: 0; font-size: var(--mide-text-xs); line-height: 1.45; color: var(--mide-muted); }
  .brand-color { display: flex; align-items: center; gap: var(--mide-space-2); }
  .brand-color input[type="color"] { flex: 0 0 44px; width: 44px; height: 44px; padding: 3px; border: 1px solid var(--mide-line-strong); border-radius: var(--mide-radius-sm); background: var(--mide-white); cursor: pointer; }
  .brand-color input[type="text"] { width: 13ch; font-family: ui-monospace, monospace; text-transform: uppercase; }
  .brand-color input[type="text"]::placeholder { text-transform: none; font-family: var(--mide-font); }
  /* An empty optional colour is «Automático»: its swatch is shown faded, never as a chosen black. */
  .brand-color.is-empty input[type="color"] { opacity: .3; }
  .brand-color.is-empty .brand-clear { visibility: hidden; }
  .brand-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-2) var(--mide-space-3); }
  .brand-file-button { display: inline-flex; align-items: center; cursor: pointer; }
  .brand-file-button.is-disabled { pointer-events: none; opacity: .55; }
  .brand-file input[type="file"]:focus-visible + .brand-file-button { outline: none; box-shadow: var(--mide-focus); }
  .brand-file-name { font-size: var(--mide-text-sm); color: var(--mide-muted); }
  .brand-clear { border: 0; background: none; padding: 4px 6px; font: inherit; font-size: var(--mide-text-sm); font-weight: 600; color: var(--mide-link); cursor: pointer; border-radius: var(--mide-radius-sm); }
  .brand-clear:hover { text-decoration: underline; }
  .brand-clear:focus-visible { outline: none; box-shadow: var(--mide-focus); }
  .brand-more { border-top: 1px solid var(--mide-line); padding-top: var(--mide-space-3); }
  .brand-more > summary { cursor: pointer; font-size: var(--mide-text-sm); font-weight: 700; color: var(--mide-link); list-style-position: inside; }
  .brand-more[open] > summary { margin-bottom: var(--mide-space-3); }
  .brand-more > .brand-field + .brand-field { margin-top: var(--mide-space-3); }
  .brand-check { padding: var(--mide-space-3) var(--mide-space-4); border-radius: var(--mide-radius); border: 1px solid var(--mide-line); background: var(--mide-warm-50); font-size: var(--mide-text-sm); line-height: 1.5; color: var(--mide-ink-2); }
  .brand-check[data-tone="ok"] { border-color: color-mix(in srgb, var(--mide-ok) 40%, transparent); background: var(--mide-ok-bg); }
  .brand-check[data-tone="warn"] { border-color: color-mix(in srgb, var(--mide-warn) 40%, transparent); background: var(--mide-warn-bg); }
  .brand-check[data-tone="bad"] { border-color: color-mix(in srgb, var(--mide-danger) 40%, transparent); background: var(--mide-danger-bg); }
  .brand-check .brand-warning { margin: var(--mide-space-2) 0 0; }
  .brand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-3); }
  .brand-actions .brand-reset { margin-left: auto; }
  .brand-confirm { padding: var(--mide-space-4); border: 1px solid var(--mide-line-strong); border-radius: var(--mide-radius); background: var(--mide-white); box-shadow: var(--mide-shadow-sm); }
  .brand-confirm p { margin: 0 0 var(--mide-space-3); font-size: var(--mide-text-sm); color: var(--mide-ink-2); }
  /* Miniature of the client portal. */
  .brand-preview-frame { margin: 0; display: grid; gap: var(--mide-space-2); }
  .brand-preview-frame figcaption { font-size: var(--mide-text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mide-muted); }
  .brand-preview { display: grid; grid-template-columns: 150px 1fr; min-height: 260px; overflow: hidden; border: 1px solid var(--mide-line); border-radius: var(--mide-radius-lg); background: var(--mide-warm-50); box-shadow: var(--mide-shadow-sm); }
  .bp-side { display: grid; align-content: start; gap: 4px; padding: 14px 10px; background: var(--mx-side-bg); color: var(--mx-side-ink); }
  .bp-brand { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 4px 12px; }
  .bp-logo { width: auto; max-width: 112px; height: 28px; }
  .bp-mono { flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--mide-gradient-action); color: var(--mide-on-accent, var(--mide-white)); font-size: 11px; font-weight: 800; }
  .bp-brand-copy { display: grid; min-width: 0; line-height: 1.2; }
  .bp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--mx-side-ink); }
  .bp-brand-copy small { font-size: 10.5px; color: var(--mx-side-ink-3); }
  /* With a logo the portal shows only the logo (the name stays for assistive tech), as in my.mide.lat. */
  .bp-logo:not([hidden]) ~ .bp-brand-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bp-nav { padding: 7px 10px; border-radius: 9px; font-size: 12px; color: var(--mx-side-ink-2); }
  .bp-active { background: var(--tenant-nav-active-bg, var(--mide-gradient-action)); color: var(--tenant-nav-active-ink, var(--mide-white)); font-weight: 600; box-shadow: inset 3px 0 0 var(--tenant-nav-active-bar, transparent); }
  .bp-main { display: grid; align-content: start; gap: 8px; padding: 18px 16px; }
  .bp-title { font-size: 17px; font-weight: 800; color: var(--mide-ink-900); }
  .bp-main p { margin: 0; font-size: 12px; color: var(--mide-muted); }
  .bp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
  .bp-primary { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--mide-radius-pill); background: var(--mide-gradient-action); color: var(--mide-on-accent, var(--mide-white)); font-size: 12px; font-weight: 700; }
  .bp-link { font-size: 12px; font-weight: 700; color: var(--mide-link, var(--mide-blue-700)); }
  .bp-accent { padding: 2px 8px; border-radius: var(--mide-radius-pill); background: var(--tenant-accent, var(--mide-violet-600)); color: var(--tenant-accent-ink, var(--mide-white)); font-size: 11px; font-weight: 700; }
  @media (max-width: 560px) { .brand-preview { grid-template-columns: 112px 1fr; } .bp-main { padding: 14px 12px; } }
  /* ---------- Reglas de negocio · Retención (ficha · pestaña Operación, #1126). Tokens only. ---------- */
  #clientDetail .retention-panel > .panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mide-space-2) var(--mide-space-3); }
  .retention-panel > .panel-header h3 { margin: 0; }
  .retention-intro { display: grid; gap: var(--mide-space-2); }
  .retention-intro p { margin: 0; }
  .retention-form { display: grid; gap: var(--mide-space-4); margin: var(--mide-space-4) 0 0; }
  .retention-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--mide-space-3); margin: 0; }
  .retention-summary > div { padding: var(--mide-space-3) var(--mide-space-4); border: 1px solid var(--mide-line); border-radius: var(--mide-radius); background: var(--mide-surface-100); }
  .retention-summary dt { font-size: var(--mide-text-xs); font-weight: 700; color: var(--mide-muted); }
  .retention-summary dd { margin: 4px 0 0; font-size: var(--mide-text-md); font-weight: 700; color: var(--mide-ink-900); overflow-wrap: anywhere; }
  .retention-choice { display: grid; gap: var(--mide-space-3); min-width: 0; margin: 0; padding: var(--mide-space-4); border: 1px solid var(--mide-line-strong); border-radius: var(--mide-radius); }
  .retention-choice legend { max-width: 100%; padding: 0 4px; font-size: var(--mide-text-sm); font-weight: 700; color: var(--mide-ink-2); }
  .retention-option { display: flex; gap: var(--mide-space-3); align-items: flex-start; cursor: pointer; }
  /* Own radio: ink ring (≥3:1 enabled and read-only), violet dot when chosen; read-only keeps the dot in ink. */
  .retention-option input { appearance: none; flex: 0 0 auto; display: grid; place-content: center; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid var(--mide-ink-2); border-radius: 50%; background: var(--mide-white); cursor: pointer; }
  .retention-option input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; transform: scale(0); background: var(--mide-violet-600); }
  .retention-option input:checked { border-color: var(--mide-violet-600); }
  .retention-option input:checked::before { transform: scale(1); }
  .retention-option input:focus-visible { outline: none; box-shadow: var(--mide-focus); }
  .retention-choice[data-readonly] .retention-option { cursor: default; }
  .retention-choice[data-readonly] .retention-option input { cursor: default; border-color: var(--mide-muted); }
  .retention-choice[data-readonly] .retention-option input:checked { border-color: var(--mide-ink-2); }
  .retention-choice[data-readonly] .retention-option input::before { background: var(--mide-ink-2); }
  .retention-option span { display: grid; gap: 2px; min-width: 0; }
  .retention-option strong { font-size: var(--mide-text-sm); color: var(--mide-ink-900); }
  .retention-option small { font-size: var(--mide-text-xs); line-height: 1.45; color: var(--mide-muted); }
  .retention-days { display: grid; gap: var(--mide-space-2); margin-left: calc(20px + var(--mide-space-3)); }
  .retention-days > label { font-size: var(--mide-text-sm); font-weight: 700; color: var(--mide-ink-2); }
  .retention-days input { width: min(100%, 180px); min-height: 44px; padding: 0 var(--mide-space-3); font: inherit; font-size: var(--mide-text-md); color: var(--mide-ink-900); background: var(--mide-white); border: 1px solid var(--mide-line-strong); border-radius: var(--mide-radius-sm); }
  .retention-days input:focus-visible { outline: none; border-color: var(--mide-focus-ring); box-shadow: var(--mide-focus); }
  .retention-days input:disabled { background: var(--mide-surface-100); color: var(--mide-ink-2); }
  .retention-icon { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .retention-message { display: flex; gap: var(--mide-space-2); align-items: flex-start; margin: 0; padding: var(--mide-space-3); border-radius: var(--mide-radius-sm); font-size: var(--mide-text-sm); line-height: 1.45; color: var(--mide-ink-900); }
  .retention-message[hidden] { display: none; }
  .retention-days[hidden] { display: none; }
  /* Loading (issue 1133 Fase 2): status text and a skeleton in the space the form will take. */
  .retention-loading { display: grid; align-content: start; gap: var(--mide-space-3); min-height: 320px; }
  .retention-loading .panel-note { margin: 0; }
  .retention-skeleton-line { display: block; height: 44px; border-radius: var(--mide-radius-sm); }
  .retention-skeleton-line:first-of-type { height: 64px; }
  .retention-message:focus-visible { outline: none; box-shadow: var(--mide-focus); }
  .retention-message[data-tone="danger"] { background: var(--mide-danger-bg); }
  .retention-message[data-tone="danger"] .retention-icon { color: var(--mide-danger); }
  .retention-message[data-tone="ok"] { background: var(--mide-ok-bg); }
  .retention-message[data-tone="ok"] .retention-icon { color: var(--mide-ok); }
  .retention-confirm > p { margin: 0 0 var(--mide-space-3); }
  .retention-ai-note { font-weight: 700; }
  .retention-warning { display: flex; gap: var(--mide-space-3); align-items: flex-start; margin: 0 0 var(--mide-space-3); padding: var(--mide-space-3) var(--mide-space-4); border: 1px solid var(--mide-warn); border-radius: var(--mide-radius-sm); background: var(--mide-warn-bg); color: var(--mide-ink-900); }
  .retention-warning .retention-icon { color: var(--mide-warn); }
  .retention-warning strong { display: block; font-size: var(--mide-text-sm); }
  .retention-warning p { margin: 2px 0 0; font-size: var(--mide-text-sm); line-height: 1.45; }
  @media (max-width: 560px) {
    .retention-days { margin-left: 0; }
    #clientDetail .retention-panel > .panel-header { flex-direction: column; align-items: flex-start; text-align: left; }
    .retention-confirm .brand-actions > button { flex: 1 1 100%; }
  }

  /* #1172 · ciclo de vida de la empresa: paso actual y «Retomar» en el catálogo, panel en la ficha. */
  .status-CANCELLED { color: var(--mide-muted); background: var(--mide-line-2); }
  .client-table .lifecycle-row-extra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--mide-space-3); margin-top: var(--mide-space-1); }
  .client-table .lifecycle-step { color: var(--mide-muted); font-size: var(--mide-text-sm); }
  /* «Retomar», «Ver historial de acciones»: secondary buttons with a 44 px target, on desktop too. */
  .client-table .lifecycle-resume, #providerClientLifecycleBody .secondary-button, #providerClientLifecycleBody .primary-button { min-height: 44px; }
  .client-table .lifecycle-resume { padding: var(--mide-space-2) var(--mide-space-3); font-size: var(--mide-text-sm); }
  /* Destructive actions: the danger token, never the primary gradient. */
  #providerClientLifecycleBody .lifecycle-danger { background: var(--mide-danger); background-image: none; border-color: var(--mide-danger); color: var(--mide-surface); }
  #providerClientLifecycleBody .lifecycle-danger:hover:not(:disabled) { filter: brightness(.92); }
  #providerClientLifecycleBody .lifecycle-danger:disabled { background: var(--mide-danger-bg); border-color: var(--mide-danger-bg); color: var(--mide-danger); cursor: not-allowed; filter: none; }
  #providerClientLifecycleBody .lifecycle-danger-outline { color: var(--mide-danger); border-color: var(--mide-danger); background: var(--mide-surface); }
  #providerClientLifecycleBody .lifecycle-danger-outline:hover:not(:disabled) { background: var(--mide-danger-bg); }
  /* «Retomar» lands below the sticky top bar. */
  #onboardingNextStep, #providerClientLifecycle, #providerClientAudit { scroll-margin-top: calc(var(--ui-topbar-h, var(--mx-topbar-h, 72px)) + var(--mide-space-3)); }
  #clientDetail .lifecycle-panel .lifecycle-state { display: flex; gap: var(--mide-space-2); align-items: center; flex-wrap: wrap; margin: 0 0 var(--mide-space-2); }
  #clientDetail .lifecycle-panel .lifecycle-pending { display: grid; gap: var(--mide-space-1); border-left: 3px solid var(--mide-warn); background: var(--mide-warn-bg); border-radius: var(--mide-radius-sm); padding: var(--mide-space-2) var(--mide-space-3); }
  #clientDetail .lifecycle-panel .lifecycle-pending-title { display: flex; align-items: center; gap: var(--mide-space-2); color: var(--mide-ink-900); }
  #clientDetail .lifecycle-panel .lifecycle-pending-icon { display: inline-flex; color: var(--mide-warn); flex: 0 0 auto; }
  #clientDetail .lifecycle-panel .lifecycle-pending-icon svg { width: 18px; height: 18px; }
  #providerClientLifecycleBody { display: grid; gap: var(--mide-space-2); justify-items: start; min-width: 0; }
  #providerClientLifecycleBody .activation-confirm { display: grid; gap: var(--mide-space-2); width: 100%; max-width: 640px; }
  #providerClientLifecycleBody .activation-confirm h4 { margin: 0; font-size: var(--mide-text-md); color: var(--mide-heading); }
  #providerClientLifecycleBody .activation-confirm label { font-weight: var(--mide-weight-semibold); color: var(--mide-ink-2); }
  #providerClientLifecycleBody .activation-check { display: flex; gap: var(--mide-space-2); align-items: flex-start; font-weight: var(--mide-weight-regular); }
  #providerClientLifecycleBody input[type="text"] {
    width: 100%; min-width: 0; font: inherit; color: var(--mide-ink-900); background: var(--mide-surface);
    border: 1px solid var(--mide-line-strong); border-radius: var(--mide-radius-sm); padding: 8px 10px;
  }
  #providerClientLifecycleBody input[type="text"]:focus-visible { outline: none; box-shadow: var(--mide-focus); }
  #providerClientLifecycleBody .activation-actions { display: flex; gap: var(--mide-space-2); flex-wrap: wrap; align-items: center; }
  #clientDetail .lifecycle-panel .lifecycle-stores { margin: var(--mide-space-1) 0 0; padding-left: var(--mide-space-5); display: grid; gap: var(--mide-space-1); overflow-wrap: anywhere; }
  @media (max-width: 520px) {
    #clientDetail .lifecycle-panel .activation-actions > button { flex: 1 1 100%; }
    /* «Siguiente paso»: one stage per row so names such as «Certificación» never break. */
    #clientDetail .onboarding-readiness-progress { grid-template-columns: minmax(0, 1fr); }
    #clientDetail .onboarding-readiness-progress li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
    #clientDetail .onboarding-readiness-progress li strong { white-space: normal; overflow-wrap: normal; word-break: keep-all; }
  }
  /* Phone cards: the step and «Retomar» go under the status, aligned with the values. */
  @media (max-width: 640px) {
    .provider-content table.pv-cards tbody td:has(> .lifecycle-row-extra) { flex-wrap: wrap; row-gap: 0; }
    .provider-content table.pv-cards tbody td > .lifecycle-row-extra { flex: 1 1 100%; margin-left: calc(40% + var(--mide-space-3)); }
  }
  /* ---------- Plan y límites (ficha · pestaña Productos, #1117 PR-D). Reuses the retention form; tokens only. ---------- */
  #clientDetail .plan-limits-panel > .panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mide-space-2) var(--mide-space-3); }
  .plan-limits-panel > .panel-header h3 { margin: 0; }
  .plan-limits-summary { margin-top: var(--mide-space-3); }
  .plan-limits-group { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
  .plan-limits-group legend { grid-column: 1 / -1; }
  .plan-limits-field { display: grid; gap: var(--mide-space-2); min-width: 0; }
  .plan-limits-field > label { font-size: var(--mide-text-sm); font-weight: 700; color: var(--mide-ink-2); }
  .plan-limits-field input, .plan-limits-field select { width: 100%; min-height: 44px; padding: 0 var(--mide-space-3); font: inherit; font-size: var(--mide-text-md); color: var(--mide-ink-900); background: var(--mide-white); border: 1px solid var(--mide-line-strong); border-radius: var(--mide-radius-sm); }
  .plan-limits-field input:focus-visible, .plan-limits-field select:focus-visible { outline: none; border-color: var(--mide-focus-ring); box-shadow: var(--mide-focus); }
  .plan-limits-field input[aria-invalid="true"], .plan-limits-field select[aria-invalid="true"] { border-color: var(--mide-danger); }
  .plan-limits-check { display: flex; gap: var(--mide-space-3); align-items: flex-start; grid-column: 1 / -1; font-size: var(--mide-text-sm); color: var(--mide-ink-900); }
  .plan-limits-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mide-violet-600); }
  .plan-limits-diff { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--mide-space-3); margin: 0 0 var(--mide-space-3); }
  .plan-limits-diff > div { padding: var(--mide-space-3) var(--mide-space-4); border: 1px solid var(--mide-line); border-radius: var(--mide-radius); background: var(--mide-surface-100); }
  .plan-limits-diff ul { margin: var(--mide-space-2) 0 0; padding-left: 1.1em; font-size: var(--mide-text-sm); line-height: 1.5; color: var(--mide-ink-900); }
  .retention-message ul { margin: 0; padding-left: 1.1em; }
  .plan-limits-notice-text { display: grid; gap: var(--mide-space-2); justify-items: start; min-width: 0; }
  .retention-message[data-tone="warn"] { background: var(--mide-warn-bg); border: 1px solid var(--mide-warn); }
  .retention-message[data-tone="warn"] .retention-icon { color: var(--mide-warn); }
  .retention-message[data-tone="info"] { background: var(--mide-surface-100); border: 1px solid var(--mide-line); }
  .retention-message[data-tone="info"] .retention-icon { color: var(--mide-ink-2); }
  .plan-limits-error { display: flex; gap: var(--mide-space-2); align-items: flex-start; margin: 0; font-size: var(--mide-text-sm); font-weight: 600; line-height: 1.4; color: var(--mide-danger); }
  .plan-limits-error[hidden] { display: none; }
  .plan-limits-error .retention-icon { width: 18px; height: 18px; margin-top: 1px; }
  .plan-limits-edit-row, .plan-limits-panel #planLimitsReadOnly { margin-top: var(--mide-space-4); }
  .plan-limits-panel button, .plan-limits-panel select { min-height: 44px; }
  @media (max-width: 560px) {
    #clientDetail .plan-limits-panel > .panel-header { flex-direction: column; align-items: flex-start; text-align: left; }
    .plan-limits-form .brand-actions > button { flex: 1 1 100%; }
  }

  /* #1133 · Instalación del cliente: the same card geometry as «Crear accesos del equipo», legible states, 44 px targets. */
  #providerInstallationAuthorizationBody { display: grid; gap: var(--mide-space-2); justify-items: start; min-width: 0; }
  #providerInstallationAuthorizationBody .installation-state { margin: 0; }
  #providerInstallationAuthorizationBody .installation-channel { color: var(--mide-ink-2); font-weight: var(--mide-weight-semibold); }
  #providerInstallationAuthorizationBody .installation-confirm { display: grid; gap: var(--mide-space-2); width: 100%; max-width: 640px; }
  #providerInstallationAuthorizationBody .installation-confirm h4 { margin: 0; font-size: var(--mide-text-md); color: var(--mide-heading); }
  #providerInstallationAuthorizationBody .activation-check { display: flex; gap: var(--mide-space-2); align-items: center; min-height: 44px; padding: var(--mide-space-1) 0; cursor: pointer; font-weight: var(--mide-weight-regular); }
  #providerInstallationAuthorizationBody .activation-check input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
  #providerInstallationAuthorizationBody .activation-actions { display: flex; gap: var(--mide-space-2); flex-wrap: wrap; }
  #providerInstallationAuthorizationBody :is(.primary-button, .secondary-button) { min-height: 44px; }
  /* «Crear accesos del equipo» disabled: legible (AA) and the reason stays in the text below it. */
  #clientDetail #bootstrapIdentityButton:disabled { background: var(--mide-surface-2); background-image: none; border: 1px solid var(--mide-line-strong); color: var(--mide-ink-2); opacity: 1; filter: none; cursor: not-allowed; box-shadow: none; }
  @media (max-width: 640px) {
    #clientDetail > #identityBootstrapActions { margin-left: 16px; margin-right: 16px; }
    #providerInstallationAuthorizationBody .activation-actions > button { flex: 1 1 100%; }
  }
  #clientDetail .identity-accesses-badge { margin: 0; }
  #clientDetail .identity-accesses-badge[hidden] { display: none; }
  #clientDetail .identity-accesses-badge .mide-chip { display: inline-flex; align-items: center; gap: var(--mide-space-1); }
  #clientDetail .identity-accesses-badge svg { width: 16px; height: 16px; }
}

  /* ADR 021 · «Espacio de prueba»: same layout as the lifecycle panel; 44 px targets; states with text, not color only. */
  #providerClientDemoSpaceBody { display: grid; gap: var(--mide-space-2); justify-items: start; min-width: 0; }
  #providerClientDemoSpaceBody .secondary-button, #providerClientDemoSpaceBody .primary-button { min-height: 44px; }
  #providerClientDemoSpaceBody .demo-space-state { display: flex; gap: var(--mide-space-2); align-items: center; flex-wrap: wrap; margin: 0; }
  #providerClientDemoSpaceBody .demo-chip-test { color: var(--mide-info); background: var(--mide-info-bg); }
  #providerClientDemoSpaceBody .demo-chip-plain { color: var(--mide-ink-2); background: var(--mide-line-2); }
  #providerClientDemoSpaceBody .demo-space-slot { display: grid; gap: var(--mide-space-2); width: 100%; min-width: 0; }
  #providerClientDemoSpaceBody .demo-space-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--mide-space-2); margin: 0; }
  #providerClientDemoSpaceBody .demo-space-facts dt { color: var(--mide-muted); font-size: var(--mide-text-sm); }
  #providerClientDemoSpaceBody .demo-space-facts dd { margin: 0; color: var(--mide-ink-900); overflow-wrap: anywhere; }
  #providerClientDemoSpaceBody .demo-space-steps { margin: 0; padding-left: var(--mide-space-5); display: grid; gap: var(--mide-space-1); width: 100%; max-width: 640px; }
  #providerClientDemoSpaceBody .demo-space-steps li { display: flex; justify-content: space-between; gap: var(--mide-space-2); flex-wrap: wrap; }
  #providerClientDemoSpaceBody .demo-step-status { font-weight: var(--mide-weight-semibold); color: var(--mide-ink-2); }
  #providerClientDemoSpaceBody .demo-step-done { color: var(--mide-ok); }
  #providerClientDemoSpaceBody .demo-step-blocked { color: var(--mide-danger); }
  #providerClientDemoSpaceBody .demo-danger { background: var(--mide-danger); background-image: none; border-color: var(--mide-danger); color: var(--mide-surface); }
  #providerClientDemoSpaceBody .demo-danger:disabled { background: var(--mide-danger-bg); border-color: var(--mide-danger-bg); color: var(--mide-danger); cursor: not-allowed; }
  #providerClientDemoSpaceBody .demo-danger-outline { color: var(--mide-danger); border-color: var(--mide-danger); background: var(--mide-surface); }
  #providerClientDemoSpaceBody .demo-danger-outline:hover:not(:disabled) { background: var(--mide-danger-bg); }
  #providerClientDemoSpaceBody .activation-confirm { display: grid; gap: var(--mide-space-2); width: 100%; max-width: 640px; }
  #providerClientDemoSpaceBody .activation-confirm h4 { margin: 0; font-size: var(--mide-text-md); color: var(--mide-heading); }
  #providerClientDemoSpaceBody .activation-confirm label { font-weight: var(--mide-weight-semibold); color: var(--mide-ink-2); }
  #providerClientDemoSpaceBody .activation-check { display: flex; gap: var(--mide-space-2); align-items: flex-start; font-weight: var(--mide-weight-regular); }
  #providerClientDemoSpaceBody input[type="text"] { width: 100%; min-width: 0; font: inherit; color: var(--mide-ink-900); background: var(--mide-surface); border: 1px solid var(--mide-line-strong); border-radius: var(--mide-radius-sm); padding: 8px 10px; min-height: 44px; }
  #providerClientDemoSpaceBody input[type="text"]:focus-visible { outline: none; box-shadow: var(--mide-focus); }
  #providerClientDemoSpaceBody .activation-actions { display: flex; gap: var(--mide-space-2); flex-wrap: wrap; align-items: center; }
  #providerClientDemoSpaceBody .activation-check input { min-width: 24px; min-height: 24px; }
  #providerClientDemoSpace { scroll-margin-top: calc(var(--ui-topbar-h, var(--mx-topbar-h, 72px)) + var(--mide-space-3)); }
  @media (max-width: 480px) { #providerClientDemoSpaceBody .activation-actions > button { flex: 1 1 100%; } }
  /* Review of #1196 (visual): the title below the sticky bar at 390 (two rows), refusals as alerts, larger help text,
     the alta check boxes: the whole label row (≥ 44 px, full width) is the touch target. */
  #providerClientDemoSpace, #providerClientDemoSpace h3 { scroll-margin-top: calc(var(--ui-topbar-h, 128px) + var(--mide-space-3)); }
  #providerClientDemoSpaceBody .demo-alert-slot:empty { display: none; }
  #providerClientDemoSpaceBody .demo-alert-slot, #providerClientDemoSpaceBody > .ui-notice { width: 100%; max-width: 640px; }
  #providerClientDemoSpaceBody .ui-notice[data-tone="danger"] .ui-notice-text,
  #providerClientDemoSpaceBody .ui-notice[data-tone="danger"] .ui-notice-body { color: var(--mide-danger); font-weight: var(--mide-weight-semibold); }
  #providerClientDemoSpaceBody .panel-note { font-size: var(--mide-text-sm); color: var(--mide-ink-2); }
  #newClientForm .form-grid small { font-size: var(--mide-text-sm); color: var(--mide-ink-2); line-height: 1.45; }
  #newClientForm .onboarding-stepper small { font-size: var(--mide-text-xs); color: var(--mide-ink-2); }
  #newClientForm .form-grid label:has(> input[type="checkbox"]) { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--mide-space-3); align-items: center; min-height: 44px; padding: 10px 0; cursor: pointer; }
  #newClientForm .form-grid label:has(> input[type="checkbox"]) > input[type="checkbox"] { grid-column: 1; grid-row: 1 / span 2; width: 24px; height: 24px; margin: 0; padding: 0; align-self: start; accent-color: var(--mide-violet-600); cursor: pointer; }
  #newClientForm .form-grid label:has(> input[type="checkbox"]) > small { grid-column: 2; }