/*
 * Academia MG — registration flow components.
 *
 * RULE: every value in this file is a var(--mg-*). If you need a colour, a
 * radius, a font or a spacing step that is not a token, add the token to
 * tokens-provisional.css first. This is what makes the coming brand update a
 * one-file change instead of a rebuild.
 *
 * Mobile-first: the base rules are the phone layout; the single media query
 * widens the shell on larger screens.
 */

/* ------------------------------------------------------------------ shell -- */

body {
  margin: 0;
  /* Families supply strings the layout cannot negotiate with: an email like
     maria.fernanda.gonzalez.lopez@hotmail.com is one unbreakable 40-character
     token, and at 320px it pushed the whole page sideways. The markup has
     always echoed the address back on the Listo screen; only short test data
     hid it. Breaking long words is the defensive default for any page that
     renders user input. */
  overflow-wrap: break-word;
  background: var(--mg-background);
  color: var(--mg-text);
  font-family: var(--mg-font-body);
  font-weight: var(--mg-weight-body);
  font-size: var(--mg-size-base);
  line-height: var(--mg-leading-body);
  -webkit-font-smoothing: antialiased;
}

.mg-shell {
  max-width: var(--mg-measure);
  margin: 0 auto;
  padding: var(--mg-space-5) var(--mg-space-4) var(--mg-space-8);
}

.mg-shell--wide {
  max-width: 64rem;
}

/* ----------------------------------------------------------------- header -- */

.mg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-space-4);
  padding-bottom: var(--mg-space-5);
}

.mg-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-3);
  text-decoration: none;
  color: inherit;
}

.mg-brand img {
  height: 30px;
  width: auto;
  display: block;
}

.mg-brand__text {
  font-weight: var(--mg-weight-heading);
  letter-spacing: 0.02em;
}

.mg-eyebrow {
  margin: 0 0 var(--mg-space-2);
  font-size: var(--mg-size-xs);
  font-weight: var(--mg-weight-medium);
  letter-spacing: var(--mg-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mg-muted);
}

/* --------------------------------------------------------------- headings -- */

h1,
h2,
h3 {
  font-family: var(--mg-font-heading);
  font-weight: var(--mg-weight-heading);
  line-height: var(--mg-leading-tight);
  margin: 0 0 var(--mg-space-4);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--mg-size-2xl);
}
h2 {
  font-size: var(--mg-size-xl);
}
h3 {
  font-size: var(--mg-size-lg);
}

p {
  margin: 0 0 var(--mg-space-4);
  color: var(--mg-text-soft);
}

a {
  color: var(--mg-primary);
}

.mg-lede {
  font-size: var(--mg-size-lg);
  color: var(--mg-text-soft);
}

.mg-muted {
  color: var(--mg-muted);
  font-size: var(--mg-size-sm);
}

/* ------------------------------------------------------------------ cards -- */

.mg-card {
  background: var(--mg-surface);
  border: var(--mg-border-width) solid var(--mg-border);
  border-radius: var(--mg-radius-lg);
  padding: var(--mg-space-5);
  margin-bottom: var(--mg-space-4);
  box-shadow: var(--mg-shadow-sm);
}

.mg-card--soft {
  background: var(--mg-surface-soft);
  box-shadow: none;
}

.mg-card__title {
  margin-bottom: var(--mg-space-3);
}

/* ------------------------------------------------------------------ forms -- */

.mg-field {
  margin-bottom: var(--mg-space-4);
}

.mg-label {
  display: block;
  margin-bottom: var(--mg-space-2);
  font-size: var(--mg-size-sm);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-text);
}

.mg-label__hint {
  font-weight: var(--mg-weight-body);
  color: var(--mg-muted);
}

.mg-input,
.mg-select,
.mg-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--mg-control-height);
  padding: var(--mg-space-3);
  background: var(--mg-background-raised);
  color: var(--mg-text);
  border: var(--mg-border-width) solid var(--mg-border-strong);
  border-radius: var(--mg-radius);
  font-family: var(--mg-font-body);
  font-size: var(--mg-size-base); /* 16px — stops iOS zooming the form */
  transition: border-color var(--mg-transition), box-shadow var(--mg-transition);
}

.mg-textarea {
  min-height: calc(var(--mg-control-height) * 2);
  resize: vertical;
}

.mg-input:focus,
.mg-select:focus,
.mg-textarea:focus {
  outline: var(--mg-focus-ring);
  outline-offset: var(--mg-focus-offset);
  border-color: var(--mg-primary);
}

.mg-input[aria-invalid='true'],
.mg-select[aria-invalid='true'],
.mg-textarea[aria-invalid='true'] {
  border-color: var(--mg-danger);
}

.mg-error {
  display: block;
  margin-top: var(--mg-space-2);
  color: var(--mg-danger);
  font-size: var(--mg-size-sm);
}

.mg-checkbox {
  display: flex;
  gap: var(--mg-space-3);
  align-items: flex-start;
  font-size: var(--mg-size-sm);
  color: var(--mg-text-soft);
  cursor: pointer;
}

.mg-checkbox input {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  accent-color: var(--mg-primary);
  flex: none;
}

.mg-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--mg-space-5);
}

.mg-fieldset legend {
  padding: 0;
  margin-bottom: var(--mg-space-4);
  font-size: var(--mg-size-xs);
  font-weight: var(--mg-weight-medium);
  letter-spacing: var(--mg-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mg-muted);
}

.mg-row {
  display: grid;
  gap: var(--mg-space-4);
}

/* ------------------------------------------------------------- radio cards -- */

.mg-option {
  display: block;
  border: var(--mg-border-width) solid var(--mg-border-strong);
  border-radius: var(--mg-radius);
  padding: var(--mg-space-4);
  margin-bottom: var(--mg-space-3);
  cursor: pointer;
  transition: border-color var(--mg-transition), background var(--mg-transition);
}

.mg-option:hover {
  border-color: var(--mg-primary);
}

.mg-option input {
  margin-right: var(--mg-space-3);
  accent-color: var(--mg-primary);
}

.mg-option:has(input:checked) {
  border-color: var(--mg-primary);
  background: var(--mg-primary-soft);
}

.mg-option__title {
  font-weight: var(--mg-weight-medium);
  color: var(--mg-text);
}

.mg-option__meta {
  display: block;
  margin-top: var(--mg-space-1);
  padding-left: calc(var(--mg-space-4) + var(--mg-space-3));
  color: var(--mg-muted);
  font-size: var(--mg-size-sm);
}

/* ---------------------------------------------------------------- buttons -- */

.mg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mg-space-2);
  min-height: var(--mg-control-height);
  padding: 0 var(--mg-space-5);
  border: var(--mg-border-width) solid transparent;
  border-radius: var(--mg-radius-pill);
  background: var(--mg-primary);
  color: var(--mg-on-primary);
  font-family: var(--mg-font-body);
  font-size: var(--mg-size-base);
  font-weight: var(--mg-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mg-transition), border-color var(--mg-transition);
}

.mg-button:hover {
  background: var(--mg-primary-hover);
}

.mg-button:focus-visible {
  outline: var(--mg-focus-ring);
  outline-offset: var(--mg-focus-offset);
}

.mg-button--block {
  width: 100%;
}

.mg-button--ghost {
  background: transparent;
  color: var(--mg-text);
  border-color: var(--mg-border-strong);
}

.mg-button--ghost:hover {
  background: var(--mg-surface-soft);
  border-color: var(--mg-primary);
}

.mg-button--small {
  min-height: 36px;
  font-size: var(--mg-size-sm);
  padding: 0 var(--mg-space-4);
}

.mg-actions {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-3);
  margin-top: var(--mg-space-5);
}

/* ----------------------------------------------------------------- chips -- */

.mg-chip {
  display: inline-block;
  padding: var(--mg-space-1) var(--mg-space-3);
  border-radius: var(--mg-radius-pill);
  font-size: var(--mg-size-xs);
  font-weight: var(--mg-weight-medium);
  letter-spacing: 0.04em;
  border: var(--mg-border-width) solid var(--mg-border-strong);
  color: var(--mg-text-soft);
}

.mg-chip--pending {
  background: var(--mg-warning-soft);
  color: var(--mg-warning);
  border-color: transparent;
}
.mg-chip--confirmed {
  background: var(--mg-success-soft);
  color: var(--mg-success);
  border-color: transparent;
}
.mg-chip--attention {
  background: var(--mg-danger-soft);
  color: var(--mg-danger);
  border-color: transparent;
}
.mg-chip--draft {
  background: var(--mg-surface-soft);
}

/* ------------------------------------------------------------------ facts -- */

.mg-facts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mg-facts li {
  display: flex;
  justify-content: space-between;
  gap: var(--mg-space-4);
  padding: var(--mg-space-3) 0;
  border-bottom: var(--mg-border-width) solid var(--mg-border);
  font-size: var(--mg-size-sm);
}

.mg-facts li:last-child {
  border-bottom: 0;
}

.mg-facts dt,
.mg-facts .mg-facts__key {
  color: var(--mg-muted);
}

.mg-facts .mg-facts__value {
  text-align: right;
  color: var(--mg-text);
}

.mg-price {
  font-size: var(--mg-size-3xl);
  font-weight: var(--mg-weight-heading);
  line-height: var(--mg-leading-tight);
  color: var(--mg-text);
  letter-spacing: -0.02em;
}

.mg-instructions {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--mg-size-sm);
}

.mg-instructions li {
  padding: var(--mg-space-2) 0;
  color: var(--mg-text-soft);
  word-break: break-word;
}

/* ------------------------------------------------------------------ notes -- */

.mg-note {
  border-left: 3px solid var(--mg-primary);
  background: var(--mg-primary-soft);
  border-radius: var(--mg-radius-sm);
  padding: var(--mg-space-4);
  margin-bottom: var(--mg-space-4);
  font-size: var(--mg-size-sm);
  color: var(--mg-text-soft);
}

.mg-note--warning {
  border-left-color: var(--mg-warning);
  background: var(--mg-warning-soft);
}

.mg-note--success {
  border-left-color: var(--mg-success);
  background: var(--mg-success-soft);
}

.mg-note p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ table -- */

.mg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mg-size-sm);
}

.mg-table th,
.mg-table td {
  text-align: left;
  padding: var(--mg-space-3);
  border-bottom: var(--mg-border-width) solid var(--mg-border);
  vertical-align: top;
}

.mg-table th {
  color: var(--mg-muted);
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-size-xs);
  letter-spacing: var(--mg-tracking-eyebrow);
  text-transform: uppercase;
}

/* The separator belongs BETWEEN rows. On the last row it lands on the card's
   own edge and reads as a double line. */
.mg-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------------------------------------------------------------------------
   THE RECIBIDA COLUMN — root cause, and why the earlier fixes did not hold.
   ---------------------------------------------------------------------------
   The cell was written as `<td class="mg-hint">`. `.mg-hint` is a general text
   utility: `display: block` plus a `margin-top`. On a <td> that is not a
   cosmetic choice, it is a layout change — a table cell set to `display: block`
   leaves the row's cell layout, the browser wraps it in an anonymous cell, and
   the element stops sharing the row's height. Its border-bottom then renders a
   few pixels below the borders of every other cell in the row, and the
   margin-top pushes its text out of alignment too.

   No amount of nowrap or border tweaking could fix that, because the cell was
   not participating in the table. The fix is that table cells get table-scoped
   classes; these two set colour and size only, and touch neither `display` nor
   `margin`. Acceptance check T1 fails if a display:block utility is applied to
   a <td> again.
   --------------------------------------------------------------------------- */

/* Secondary line inside a cell — email, dates, plan position. A <span>, so
   `display:block` here is correct and stays INSIDE the cell. */
.mg-table__meta {
  display: block;
  margin-top: var(--mg-space-1);
  color: var(--mg-muted);
  font-size: var(--mg-size-xs);
  line-height: 1.4;
}

/* The date+time cell. No display, no margin — it must remain a table cell. */
.mg-table__when {
  color: var(--mg-muted);
  font-size: var(--mg-size-xs);
  white-space: nowrap;
}

.mg-table__actions {
  white-space: nowrap;
}

.mg-table tr:hover td {
  background: var(--mg-surface-soft);
}

/* The scroll container is the card itself, which is padded. When the table is
   wider than the card, a scrolled block does not paint its padding-right past
   the overflow edge, so the last column would sit flush against the card border
   while everything else respected the padding. A transparent right border moves
   with the content and keeps the gutter at any scroll position. */
.mg-table-scroll {
  overflow-x: auto;
}

.mg-table-scroll > .mg-table {
  border-right: var(--mg-space-1) solid transparent;
}

/* ----------------------------------------------------------------- footer -- */

.mg-footer {
  margin-top: var(--mg-space-7);
  padding-top: var(--mg-space-4);
  border-top: var(--mg-border-width) solid var(--mg-border);
  font-size: var(--mg-size-xs);
  color: var(--mg-muted);
}

.mg-footer a {
  color: var(--mg-text-soft);
}

/* ------------------------------------------------------------ upload input -- */

.mg-upload {
  display: block;
  border: 1px dashed var(--mg-border-strong);
  border-radius: var(--mg-radius);
  padding: var(--mg-space-4);
  text-align: center;
  font-size: var(--mg-size-sm);
  color: var(--mg-text-soft);
}

.mg-upload input[type='file'] {
  display: block;
  width: 100%;
  margin-top: var(--mg-space-3);
  color: var(--mg-text-soft);
  font-family: var(--mg-font-body);
  font-size: var(--mg-size-sm);
}

.mg-receipts {
  list-style: none;
  margin: var(--mg-space-3) 0 0;
  padding: 0;
  font-size: var(--mg-size-sm);
}

.mg-receipts li {
  padding: var(--mg-space-2) 0;
  color: var(--mg-success);
}

/* --------------------------------------------------------------- responsive */

@media (min-width: 40rem) {
  .mg-shell {
    padding: var(--mg-space-7) var(--mg-space-5) var(--mg-space-8);
  }

  .mg-row--two {
    grid-template-columns: 1fr 1fr;
  }

  .mg-actions {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  h1 {
    font-size: var(--mg-size-3xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ============================================================================
 * V0.2 components
 * Same rule as everything above: every value is a var(--mg-*). Two tokens were
 * added to tokens-provisional.css for these (--mg-info, --mg-info-soft); nothing
 * here introduces a literal.
 * ==========================================================================*/

/* ---------------------------------------------------------------- stepper -- */

.mg-stepper {
  margin: 0 0 var(--mg-space-5);
}

.mg-stepper ol {
  display: flex;
  gap: var(--mg-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mg-stepper__step {
  flex: 1;
  min-width: 0;
}

.mg-stepper__step > a,
.mg-stepper__step > span {
  display: flex;
  align-items: center;
  gap: var(--mg-space-2);
  padding-top: var(--mg-space-2);
  border-top: 2px solid var(--mg-border);
  text-decoration: none;
  color: var(--mg-muted);
  font-size: var(--mg-size-xs);
  letter-spacing: var(--mg-tracking-eyebrow);
  text-transform: uppercase;
}

/* The mark is the only thing that changes shape between states, so the row
   stays visually calm while still being unambiguous. */
.mg-stepper__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--mg-radius-pill);
  border: var(--mg-border-width) solid var(--mg-border-strong);
  font-size: var(--mg-size-xs);
  letter-spacing: 0;
}

.mg-stepper__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-stepper__step.is-active > a,
.mg-stepper__step.is-active > span {
  color: var(--mg-primary);
  border-top-color: var(--mg-primary);
}

.mg-stepper__step.is-active .mg-stepper__mark {
  border-color: var(--mg-primary);
  background: var(--mg-primary);
  color: var(--mg-on-primary);
  font-weight: var(--mg-weight-medium);
}

.mg-stepper__step.is-done > a,
.mg-stepper__step.is-done > span {
  color: var(--mg-text-soft);
  border-top-color: var(--mg-border-strong);
}

.mg-stepper__step.is-done .mg-stepper__mark {
  border-color: var(--mg-primary);
  color: var(--mg-primary);
}

/* A completed step that can be revisited is the only clickable one. */
.mg-stepper__step.is-done > a:hover {
  color: var(--mg-primary);
}

.mg-stepper__step.is-done > a:focus-visible {
  outline: var(--mg-focus-ring);
  outline-offset: var(--mg-focus-offset);
}

.mg-stepper__step.is-upcoming > span {
  opacity: 0.55;
}

/* ---------------------------------------------------------------- summary -- */

.mg-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mg-space-4);
  background: var(--mg-surface-soft);
  border: var(--mg-border-width) solid var(--mg-border);
  border-radius: var(--mg-radius-lg);
  padding: var(--mg-space-4);
  margin-bottom: var(--mg-space-4);
}

.mg-summary__body {
  min-width: 0;
}

.mg-summary__title {
  margin: 0 0 var(--mg-space-1);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-text);
}

.mg-summary__age {
  color: var(--mg-muted);
  font-weight: var(--mg-weight-body);
}

.mg-summary__line {
  margin: 0;
  font-size: var(--mg-size-sm);
  color: var(--mg-muted);
}

/* Long addresses must wrap rather than push the card sideways on a phone. */
.mg-summary__email {
  overflow-wrap: anywhere;
}

.mg-summary__edit {
  flex: none;
  font-size: var(--mg-size-sm);
  white-space: nowrap;
}

/* --------------------------------------------------------- date of birth -- */

.mg-dob {
  display: grid;
  /* Day and year need less room than the month name. */
  grid-template-columns: 4.5rem 1fr 5.5rem;
  gap: var(--mg-space-2);
}

.mg-dob__sub {
  display: block;
  margin-bottom: var(--mg-space-1);
  font-size: var(--mg-size-xs);
  color: var(--mg-muted);
}

.mg-dob .mg-select {
  padding-left: var(--mg-space-2);
  padding-right: var(--mg-space-2);
}

/* ------------------------------------------------------------- sex choice -- */

.mg-choice {
  display: flex;
  gap: var(--mg-space-3);
}

.mg-choice__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mg-space-2);
  min-height: var(--mg-control-height);
  padding: 0 var(--mg-space-3);
  border: var(--mg-border-width) solid var(--mg-border-strong);
  border-radius: var(--mg-radius);
  cursor: pointer;
  font-size: var(--mg-size-sm);
  color: var(--mg-text-soft);
  transition: border-color var(--mg-transition), background var(--mg-transition);
}

.mg-choice__item input {
  accent-color: var(--mg-primary);
}

.mg-choice__item:has(input:checked) {
  border-color: var(--mg-primary);
  background: var(--mg-primary-soft);
  color: var(--mg-text);
}

.mg-choice__item:focus-within {
  outline: var(--mg-focus-ring);
  outline-offset: var(--mg-focus-offset);
}

/* ------------------------------------------------------------------ hints -- */

.mg-hint {
  display: block;
  margin-top: var(--mg-space-2);
  color: var(--mg-muted);
  font-size: var(--mg-size-sm);
}

.mg-hint--block {
  margin-top: var(--mg-space-4);
}

/* ------------------------------------------------------ transfer details -- */

.mg-details {
  margin: var(--mg-space-4) 0 0;
}

.mg-details__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mg-space-4);
  padding: var(--mg-space-3) 0;
  border-bottom: var(--mg-border-width) solid var(--mg-border);
}

.mg-details__row:last-child {
  border-bottom: 0;
}

.mg-details__row dt {
  color: var(--mg-muted);
  font-size: var(--mg-size-sm);
  flex: none;
}

.mg-details__row dd {
  margin: 0;
  text-align: right;
  color: var(--mg-text);
  overflow-wrap: anywhere;
}

/* The alias is the one thing most parents will actually use. */
.mg-details__row--lead dd {
  font-size: var(--mg-size-lg);
  font-weight: var(--mg-weight-medium);
}

.mg-copyable {
  user-select: all;
  -webkit-user-select: all;
}

/* --------------------------------------------------------- status blocks -- */

.mg-status {
  border-radius: var(--mg-radius-lg);
  padding: var(--mg-space-5);
  margin-bottom: var(--mg-space-4);
  border: var(--mg-border-width) solid var(--mg-border);
  background: var(--mg-surface);
}

.mg-status--confirmed {
  border-left: 3px solid var(--mg-success);
}

.mg-status--pending {
  border-left: 3px solid var(--mg-warning);
}

.mg-status__eyebrow {
  margin: 0 0 var(--mg-space-2);
  font-size: var(--mg-size-xs);
  font-weight: var(--mg-weight-medium);
  letter-spacing: var(--mg-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mg-muted);
}

.mg-status__title {
  margin: 0 0 var(--mg-space-3);
}

.mg-status__body {
  margin: 0;
}

/* The line a parent must not miss. */
.mg-status__flag {
  margin: var(--mg-space-4) 0 0;
  padding: var(--mg-space-3) var(--mg-space-4);
  border-radius: var(--mg-radius);
  background: var(--mg-warning-soft);
  color: var(--mg-text);
  font-size: var(--mg-size-sm);
}

/* --------------------------------------------------------------- timeline -- */

.mg-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mg-step;
}

.mg-timeline__item {
  display: flex;
  gap: var(--mg-space-3);
  padding: var(--mg-space-3) 0;
  border-bottom: var(--mg-border-width) solid var(--mg-border);
}

/* A flex item defaults to `min-width: auto`, which refuses to shrink below its
   min-content width. The body of this step echoes the family's email address,
   and one unbreakable 40-character token therefore set a 293px floor that blew
   the 320px layout open. `min-width: 0` lets the item shrink; `anywhere` is what
   actually lowers min-content — `break-word` alone does not, which is why the
   inherited rule on <body> was not enough on its own. */
.mg-timeline__item > div {
  min-width: 0;
}

.mg-timeline__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mg-timeline__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--mg-radius-pill);
  border: var(--mg-border-width) solid var(--mg-border-strong);
  font-size: var(--mg-size-xs);
  color: var(--mg-muted);
}

.mg-timeline__item.is-done .mg-timeline__mark {
  border-color: var(--mg-success);
  color: var(--mg-success);
}

.mg-timeline__title {
  margin: 0 0 var(--mg-space-1);
  color: var(--mg-text);
  font-weight: var(--mg-weight-medium);
  font-size: var(--mg-size-sm);
}

.mg-timeline__body {
  margin: 0;
  /* Carries a family-supplied email address. See .mg-timeline__item > div. */
  overflow-wrap: anywhere;
  font-size: var(--mg-size-sm);
  color: var(--mg-muted);
}

/* ------------------------------------------------------------ admin extras -- */

.mg-statechips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-2);
  margin-bottom: var(--mg-space-3);
}

.mg-chip--info {
  background: var(--mg-info-soft);
  color: var(--mg-info);
  border-color: transparent;
}

.mg-chip--legacy {
  opacity: 0.7;
}

.mg-statbar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mg-space-3);
  margin-bottom: var(--mg-space-5);
}

.mg-stat {
  background: var(--mg-surface-soft);
  border: var(--mg-border-width) solid var(--mg-border);
  border-radius: var(--mg-radius);
  padding: var(--mg-space-4);
}

.mg-stat--attention {
  border-color: var(--mg-warning);
}

.mg-stat__value {
  display: block;
  font-size: var(--mg-size-2xl);
  font-weight: var(--mg-weight-heading);
  line-height: var(--mg-leading-tight);
  color: var(--mg-text);
}

.mg-stat__label {
  display: block;
  margin-top: var(--mg-space-1);
  font-size: var(--mg-size-xs);
  color: var(--mg-muted);
}

.mg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-3);
  font-size: var(--mg-size-sm);
}

.mg-filters a {
  color: var(--mg-muted);
  text-decoration: none;
}

.mg-filters a:hover,
.mg-filters a.is-active {
  color: var(--mg-primary);
}

.mg-filters__sep {
  color: var(--mg-border-strong);
}

.mg-subtitle {
  margin: var(--mg-space-5) 0 var(--mg-space-2);
  font-size: var(--mg-size-sm);
  letter-spacing: var(--mg-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mg-muted);
}

.mg-actions--wrap {
  flex-direction: row;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------- upload -- */

.mg-upload__label {
  display: block;
  font-weight: var(--mg-weight-medium);
  color: var(--mg-text);
  font-size: var(--mg-size-sm);
}

/* --------------------------------------------------------------- responsive */

@media (min-width: 40rem) {
  .mg-statbar {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Very narrow phones: the stepper labels are the first thing to give. */
@media (max-width: 22rem) {
  .mg-stepper__label {
    font-size: 0.65rem;
  }

  .mg-dob {
    grid-template-columns: 3.75rem 1fr 4.75rem;
  }
}

/* ------------------------------------------------------------ V0.3 pieces -- */

/* One-line replacement for the config-audit panel that used to dominate the
   admin list. The checks did not change; only how much room they take. */
.mg-inline-warning {
  margin: 0 0 var(--mg-space-4);
  padding: var(--mg-space-3) var(--mg-space-4);
  border-left: 3px solid var(--mg-warning);
  background: var(--mg-surface-soft);
  border-radius: var(--mg-radius-sm);
  font-size: var(--mg-size-sm);
}

/* Admin contact actions: WhatsApp and email. Unobtrusive until hovered, and
   sized to stay a comfortable target on a laptop trackpad. */
.mg-iconlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--mg-radius-sm);
  color: var(--mg-muted);
  text-decoration: none;
  transition: background var(--mg-transition), color var(--mg-transition);
}

.mg-iconlink:hover,
.mg-iconlink:focus-visible {
  background: var(--mg-surface);
  color: var(--mg-primary);
}

/* Client-facing WhatsApp help. Present on every step, never competing with the
   primary action: it sits after the form, muted, and only appears at all when
   the number is configured. */
.mg-help {
  margin: var(--mg-space-6) 0 0;
  text-align: center;
}

.mg-help__link {
  display: inline-flex;
  align-items: center;
  gap: var(--mg-space-2);
  min-height: 44px;
  padding: var(--mg-space-2) var(--mg-space-4);
  border-radius: var(--mg-radius-pill);
  color: var(--mg-muted);
  font-size: var(--mg-size-sm);
  text-decoration: none;
}

.mg-help__link:hover,
.mg-help__link:focus-visible {
  background: var(--mg-surface-soft);
  color: var(--mg-primary);
}

.mg-help__icon {
  display: inline-flex;
  color: var(--mg-primary);
}

/* The instalment calendar shown under the plan options. */
.mg-schedule {
  margin: var(--mg-space-4) 0 0;
  padding: var(--mg-space-3) 0 0;
  border-top: var(--mg-border-width) solid var(--mg-border);
  list-style: none;
  font-size: var(--mg-size-sm);
}

.mg-schedule li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--mg-space-2);
  padding: var(--mg-space-2) 0;
}

.mg-schedule__key {
  color: var(--mg-muted);
}

/* Cuota-by-cuota state, family-side and admin-side. */
.mg-installments {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-installment {
  padding: var(--mg-space-4) 0;
  border-bottom: var(--mg-border-width) solid var(--mg-border);
}

.mg-installment:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mg-installment.is-verified {
  opacity: 0.72;
}

.mg-installment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-space-2);
}

.mg-installment__name {
  font-weight: var(--mg-weight-medium);
}

.mg-installment__meta {
  margin: var(--mg-space-1) 0 0;
  color: var(--mg-muted);
  font-size: var(--mg-size-sm);
}

/* The persistent Completar pago URL, shown so it can be copied. Long and
   unbreakable, so it must be allowed to wrap or it forces the page wide. */
.mg-permalink {
  margin: var(--mg-space-3) 0 0;
  font-size: var(--mg-size-sm);
  word-break: break-all;
  overflow-wrap: anywhere;
}