/* Planes y suscripciones (plans-panel.js). Solo usa tokens de design-system.css. */
.pl-tools { flex-wrap: wrap; row-gap: var(--sp-2); }
.pl-search { width: 280px; }
.pl-plan { width: 240px; }
.pl-check { width: 36px; }
.pl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.pl-form > .pl-section, .pl-form > .pl-checks, .pl-form > .ds-check { grid-column: 1 / -1; }
.pl-section { margin: var(--sp-2) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); font-size: var(--fs-meta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.pl-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pl-checks { display: flex; flex-direction: column; gap: var(--sp-2); }
.pl-forms { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pl-form-item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-base); }
.pl-form-item.is-off { opacity: 0.6; }
.pl-form-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-chips { flex-wrap: wrap; margin-top: var(--sp-1); }
.pl-compare th, .pl-compare td { vertical-align: top; min-width: 180px; }
.pl-compare th:first-child, .pl-compare td:first-child { min-width: 220px; }
.pl-cell { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.pl-results { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; margin-bottom: var(--sp-2); }
.pl-result { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pl-result:hover, .pl-result:focus-visible { background: var(--wash); outline: none; }
.pl-chosen { margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--wash); }
@media (max-width: 760px) {
  .pl-form { grid-template-columns: 1fr; }
  .pl-search, .pl-plan { width: 100%; }
}