/* «Mi plan»: solo la disposición; colores, tipografía, tarjetas y botones salen del canon (canon-tokens.css / canon-components.css). */
.mp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-4); align-items: start; }
.mp-col { display: grid; gap: var(--sp-4); min-width: 0; align-content: start; }
.mp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.mp-facts > div { display: grid; gap: 2px; padding: 2px var(--sp-4) 2px 0; min-width: 0; }
.mp-facts > div + div { padding-left: var(--sp-4); border-left: var(--border-w) solid var(--border-soft); }
.mp-facts dt, .mp-facts dd { margin: 0; }
.mp-facts dd { font-size: var(--fs-title); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mp-bar { height: var(--sp-2); border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.mp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.mp-bar.is-warn i { background: var(--warning-solid); }
.mp-bar-row { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-1); }
.mp-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mp-pay { padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); }
.mp-c-pay:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mp-inc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.mp-inc li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--sp-2); }
.mp-inc li::before { content: ""; width: var(--sp-3); height: var(--sp-2); margin-top: var(--sp-1); border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.mp-inc li.is-no::before { height: 0; margin-top: var(--sp-3); border-left: 0; border-bottom: 2px solid var(--text-muted); transform: none; }
/* Hasta 900 px una sola columna: el plan, cómo pagar, pasar a licencia y qué incluye (el orden del prototipo). */
@media (max-width: 900px) {
  .mp-grid { display: flex; flex-direction: column; align-items: stretch; }
  .mp-col { display: contents; }
  .mp-col > .ui-card { order: 4; }
  .mp-col > .mp-c-plan { order: 1; }
  .mp-col > .mp-c-pay { order: 2; }
  .mp-col > .mp-c-lic { order: 3; }
}
@media (max-width: 760px) {
  .mp-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--sp-3); }
  .mp-facts > div:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .mp-acts .ui-btn { flex: 1; }
}

/* Servicio suspendido por pago pendiente (suspended-view.js): aviso fijo arriba y Mi plan debajo; sin menú ni nada más. */
.sus-shell { display: grid; gap: var(--sp-4); align-content: start; min-height: 100dvh; max-width: 1100px; margin: 0 auto; padding: var(--sp-4) 16px var(--sp-6); background: var(--canvas); }
.sus-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.sus-alert { padding: var(--sp-3) var(--sp-4); border: var(--border-w) solid var(--warn-border); border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn-text); font-size: var(--fs-body); }