/* ============================================================================
   Components — styled to the system, hooking the BEM class names the pages
   already use (additive, no markup churn). Every value references var(--mt-*).
   Gold is earned: only the single primary CTA per page is gold-filled.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Page section wrappers — single-column form/reading width, centred
--------------------------------------------------------------------------- */
.login,
.password-setup,
.password-reset-request,
.member-data,
.member-cancel,
.completar-pago,
.mi-cuenta {
  max-width: var(--mt-form-max);
  margin-inline: auto;
  padding-block: var(--mt-space-8);
}

.login > h1,
.password-setup > h1,
.password-reset-request > h1,
.member-data > h1,
.member-cancel > h1,
.completar-pago > h1,
.mi-cuenta__saludo {
  margin-top: 0;
  margin-bottom: var(--mt-space-4);
}

/* ---------------------------------------------------------------------------
   2. Form fields — label / control / note / error / warning
--------------------------------------------------------------------------- */
.login__field,
.password-setup__field,
.password-reset-request__field,
.field {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-2);
  margin-bottom: var(--mt-space-4);
}

.login__field > label,
.password-setup__field > label,
.password-reset-request__field > label,
.field > label {
  font-size: var(--mt-text-sm);
  font-weight: var(--mt-weight-medium);
  color: var(--mt-color-text-secondary);
}

/* Text-like controls across all hand-rolled form blocks */
.login input:not([type="checkbox"]):not([type="radio"]),
.password-setup input,
.password-reset-request input,
.member-data input:not([type="checkbox"]):not([type="radio"]),
.member-data textarea,
.member-data select,
.member-cancel textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: var(--mt-space-3) var(--mt-space-4);
  font-family: var(--mt-font-body);
  font-size: var(--mt-text-base);
  line-height: var(--mt-leading-ui);
  color: var(--mt-color-ink);
  background-color: var(--mt-color-surface);
  border: 1px solid var(--mt-color-border-input);
  border-radius: var(--mt-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login input::placeholder,
.password-setup input::placeholder,
.password-reset-request input::placeholder,
.member-data input::placeholder,
.member-data textarea::placeholder,
.member-cancel textarea::placeholder {
  color: var(--mt-color-text-muted);
}

.login input:not([type="checkbox"]):not([type="radio"]):focus,
.password-setup input:focus,
.password-reset-request input:focus,
.member-data input:focus,
.member-data textarea:focus,
.member-data select:focus,
.member-cancel textarea:focus {
  border-color: var(--mt-color-ink);
  outline: var(--mt-focus-outline);
  outline-offset: var(--mt-focus-offset);
  box-shadow: var(--mt-focus-ring);
}

/* The field's own error state (design-system: "its border becomes --mt-color-danger and its
   message text is --mt-color-danger" — the message half shipped first, this is the border half).
   Driven off aria-invalid rather than a class, deliberately: the visual state and the state a
   screen reader is told then cannot drift apart, because they are the same attribute. The focus
   rule below keeps the danger border while focused, so tabbing into a rejected field does not make
   it look accepted. */
.login input[aria-invalid="true"],
.password-setup input[aria-invalid="true"],
.password-reset-request input[aria-invalid="true"],
.member-data input[aria-invalid="true"],
.member-data textarea[aria-invalid="true"],
.member-data select[aria-invalid="true"],
.member-cancel textarea[aria-invalid="true"],
.login input[aria-invalid="true"]:focus,
.password-setup input[aria-invalid="true"]:focus,
.password-reset-request input[aria-invalid="true"]:focus,
.member-data input[aria-invalid="true"]:focus,
.member-data textarea[aria-invalid="true"]:focus,
.member-cancel textarea[aria-invalid="true"]:focus {
  border-color: var(--mt-color-danger);
  /* 2px, not 1: colour alone barely registers on a hairline. box-sizing is border-box on these
     controls, so the field does not change size and nothing reflows. */
  border-width: 2px;
}

.member-data textarea,
.member-cancel textarea {
  min-height: var(--mt-space-24);
  resize: vertical;
}

/* Read-only / disabled inputs — desaturated warm, not grey-blue */
.member-data input[disabled],
.member-data input[readonly] {
  background-color: var(--mt-color-disabled-bg);
  color: var(--mt-color-text-muted);
  border-color: var(--mt-color-border);
  cursor: not-allowed;
}

/* Checkbox rows flip to a horizontal layout */
.login__field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--mt-space-2);
}
.login__field--checkbox > label {
  font-weight: var(--mt-weight-regular);
  color: var(--mt-color-ink);
}
.login__field--checkbox input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--mt-color-gold-active);
}

/* Field meta text */
.field__note {
  font-size: var(--mt-text-sm);
  color: var(--mt-color-text-muted);
  margin: 0;
}
.field__error,
.signup__error {
  font-size: var(--mt-text-sm);
  color: var(--mt-color-danger);
  min-height: 1.2em;
}
.field__warning,
.password-setup__hint {
  font-size: var(--mt-text-sm);
  color: var(--mt-color-warning);
}
.password-setup__hint { color: var(--mt-color-text-muted); }

/* When a field carries an error message, redden its control */
.field:has(.field__error:not(:empty)) input,
.field:has(.field__error:not(:empty)) textarea {
  border-color: var(--mt-color-danger);
}

/* ---------------------------------------------------------------------------
   3. Buttons
--------------------------------------------------------------------------- */
/* Shared button base */
.mt-btn,
.login__submit button,
.password-setup__submit button,
.password-reset-request__submit button,
.member-data__actions button[type="submit"],
.member-cancel__actions button[type="submit"],
.mi-cuenta__logout button,
.completar-pago button,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-2);
  padding: var(--mt-space-3) var(--mt-space-6);
  font-family: var(--mt-font-body);
  font-size: var(--mt-text-base);
  font-weight: var(--mt-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--mt-radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Primary (gold fill, ink text) — the single CTA per page */
.mt-btn--primary,
.login__submit button,
.password-setup__submit button,
.password-reset-request__submit button,
.member-data__actions button[type="submit"],
.completar-pago button,
a.button {
  color: var(--mt-color-ink);
  background-color: var(--mt-color-gold);
  border-color: var(--mt-color-gold);
}
.mt-btn--primary:hover,
.login__submit button:hover,
.password-setup__submit button:hover,
.password-reset-request__submit button:hover,
.member-data__actions button[type="submit"]:hover,
.completar-pago button:hover,
a.button:hover {
  color: var(--mt-color-ink);
  background-color: var(--mt-color-gold-hover);
  border-color: var(--mt-color-gold-hover);
}
.mt-btn--primary:active,
.login__submit button:active,
.password-setup__submit button:active,
.password-reset-request__submit button:active,
.member-data__actions button[type="submit"]:active,
.completar-pago button:active {
  background-color: var(--mt-color-gold-active);
  border-color: var(--mt-color-gold-active);
}

/* Disabled — desaturated warm, never grey-blue */
.mt-btn:disabled,
.login__submit button:disabled,
.password-setup__submit button:disabled,
.password-reset-request__submit button:disabled,
.member-data__actions button[type="submit"]:disabled,
.member-cancel__actions button[type="submit"]:disabled,
.completar-pago button:disabled {
  color: var(--mt-color-disabled-text);
  background-color: var(--mt-color-disabled-bg);
  border-color: var(--mt-color-disabled-bg);
  opacity: 1;
  cursor: not-allowed;
}

/* Secondary (ink outline / ghost) — logout, neutral actions */
.mt-btn--secondary,
.mi-cuenta__logout button {
  color: var(--mt-color-ink);
  background-color: transparent;
  border-color: var(--mt-color-ink);
}
.mt-btn--secondary:hover,
.mi-cuenta__logout button:hover {
  background-color: var(--mt-color-surface-2);
}

/* Destructive — warm-red text, no fill, deliberately quiet */
.mt-btn--destructive,
.member-cancel__actions button[type="submit"] {
  color: var(--mt-color-danger);
  background-color: transparent;
  border-color: var(--mt-color-danger);
}
.mt-btn--destructive:hover,
.member-cancel__actions button[type="submit"]:hover {
  color: var(--mt-color-surface);
  background-color: var(--mt-color-danger);
  border-color: var(--mt-color-danger);
}

/* Tertiary / link — text only, gold underline on hover */
.mt-btn--link,
.member-data__actions a,
.member-cancel__actions a,
.login__recover a,
.password-reset-request__login a {
  color: var(--mt-color-ink);
  text-decoration: underline;
  text-decoration-color: var(--mt-color-border-input);
  text-underline-offset: 0.15em;
}
.mt-btn--link:hover,
.member-data__actions a:hover,
.member-cancel__actions a:hover,
.login__recover a:hover,
.password-reset-request__login a:hover {
  color: var(--mt-color-gold-text);
  text-decoration-color: currentColor;
}

/* Action button rows */
.login__submit,
.password-setup__submit,
.password-reset-request__submit {
  margin-top: var(--mt-space-6);
}
.member-data__actions,
.member-cancel__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mt-space-4);
  margin-top: var(--mt-space-6);
}

/* Inline status text (JS feedback regions) */
.login__status,
.password-setup__status,
.password-reset-request__status,
.completar-pago__status,
.signup__status,
#md-status,
#mc-status {
  color: var(--mt-color-text-secondary);
  font-size: var(--mt-text-sm);
}
/* The error state for those same regions (design-system: "Error states use warm red, not gold").
   The base colour above stays neutral because these regions also carry hints and success text —
   turning all of it red would be a worse bug than the grey errors this fixes. */
.login__status.is-error,
.password-setup__hint.is-error,
.password-setup__status.is-error,
.password-reset-request__status.is-error,
.completar-pago__status.is-error,
.signup__status.is-error,
#md-status.is-error,
#mc-status.is-error {
  color: var(--mt-color-danger);
}
.login__notice {
  color: var(--mt-color-warning);
  background-color: var(--mt-color-warning-bg);
  border-radius: var(--mt-radius-sm);
  padding: var(--mt-space-2) var(--mt-space-3);
}

/* ---------------------------------------------------------------------------
   4. Account dashboard (/mi-cuenta)
--------------------------------------------------------------------------- */
.mi-cuenta__estado {
  background-color: var(--mt-color-surface-2);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  box-shadow: var(--mt-shadow-sm);
  padding: var(--mt-space-6);
  margin-bottom: var(--mt-space-8);
}
.mi-cuenta__estado-copy { margin-top: 0; }
.mi-cuenta__fecha {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--mt-space-3);
}
.mi-cuenta__fecha-valor {
  font-family: var(--mt-font-heading);
  font-weight: var(--mt-weight-bold);
  font-size: var(--mt-text-h5);
}
.mi-cuenta__importe {
  display: inline-block;
  font-weight: var(--mt-weight-medium);
  color: var(--mt-color-gold-text);
  background-color: var(--mt-color-gold-tint);
  border-radius: var(--mt-radius-pill);
  padding: var(--mt-space-1) var(--mt-space-3);
}
.mi-cuenta__guia,
.mi-cuenta__desde {
  color: var(--mt-color-text-muted);
  font-size: var(--mt-text-sm);
}
.mi-cuenta__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-3);
  margin-bottom: var(--mt-space-8);
}
.mi-cuenta__accion {
  display: block;
  padding: var(--mt-space-4) var(--mt-space-6);
  color: var(--mt-color-ink);
  text-decoration: none;
  background-color: var(--mt-color-surface);
  border: 1px solid var(--mt-color-border-input);
  border-radius: var(--mt-radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mi-cuenta__accion:hover {
  color: var(--mt-color-ink);
  border-color: var(--mt-color-gold);
  box-shadow: var(--mt-shadow-sm);
}
.mi-cuenta__pago,
.mi-cuenta__contacto,
.mi-cuenta__rejoin-aviso {
  color: var(--mt-color-text-secondary);
  font-size: var(--mt-text-sm);
}

/* ---------------------------------------------------------------------------
   5. Cancel membership (/mi-cuenta/cancelar) — the "zona delicada"
--------------------------------------------------------------------------- */
.member-cancel__summary {
  list-style: none;
  padding: var(--mt-space-6);
  margin-bottom: var(--mt-space-8);
  background-color: var(--mt-color-surface-2);
  border: 1px solid var(--mt-color-border);
  border-left: 3px solid var(--mt-color-warning);
  border-radius: var(--mt-radius-md);
}
.member-cancel__summary li {
  padding-left: var(--mt-space-4);
  position: relative;
  margin-bottom: var(--mt-space-2);
}
.member-cancel__summary li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--mt-color-warning);
  font-weight: var(--mt-weight-bold);
}

/* ---------------------------------------------------------------------------
   6. Reusable component utilities (for future pages + explicit use)
--------------------------------------------------------------------------- */
.mt-card {
  background-color: var(--mt-color-surface);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  box-shadow: var(--mt-shadow-sm);
  padding: var(--mt-space-8);
}

.mt-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--mt-text-caption);
  font-weight: var(--mt-weight-medium);
  line-height: 1;
  padding: var(--mt-space-1) var(--mt-space-3);
  border-radius: var(--mt-radius-pill);
}
.mt-badge--activa   { color: var(--mt-color-success); background-color: var(--mt-color-success-bg); }
.mt-badge--cancelando { color: var(--mt-color-warning); background-color: var(--mt-color-warning-bg); }
.mt-badge--pago-fallido { color: var(--mt-color-danger); background-color: var(--mt-color-danger-bg); }
.mt-badge--pendiente { color: var(--mt-color-text-secondary); background-color: var(--mt-color-surface-2); }

.mt-alert {
  border-radius: var(--mt-radius-md);
  padding: var(--mt-space-4) var(--mt-space-6);
  border-left: 3px solid transparent;
}
.mt-alert--info    { background-color: var(--mt-color-surface-2); border-left-color: var(--mt-color-gold); color: var(--mt-color-ink); }
.mt-alert--success { background-color: var(--mt-color-success-bg); border-left-color: var(--mt-color-success); color: var(--mt-color-success); }
.mt-alert--warning { background-color: var(--mt-color-warning-bg); border-left-color: var(--mt-color-warning); color: var(--mt-color-warning); }
.mt-alert--error   { background-color: var(--mt-color-danger-bg); border-left-color: var(--mt-color-danger); color: var(--mt-color-danger); }

.mt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-1);
  font-size: var(--mt-text-caption);
  color: var(--mt-color-gold-text);
  background-color: var(--mt-color-gold-tint);
  border-radius: var(--mt-radius-pill);
  padding: var(--mt-space-1) var(--mt-space-3);
}
.mt-chip--neutral { color: var(--mt-color-text-secondary); background-color: var(--mt-color-surface-2); }

/* Loading — warm shimmer skeleton + gold spinner */
.mt-skeleton {
  border-radius: var(--mt-radius-sm);
  background: linear-gradient(90deg,
    var(--mt-color-surface-2) 25%,
    var(--mt-color-surface-3) 37%,
    var(--mt-color-surface-2) 63%);
  background-size: 400% 100%;
  animation: mt-shimmer 1.4s ease infinite;
}
@keyframes mt-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}
.mt-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--mt-color-border);
  border-top-color: var(--mt-color-gold);
  border-radius: var(--mt-radius-pill);
  animation: mt-spin 0.7s linear infinite;
}
@keyframes mt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mt-skeleton, .mt-spinner { animation: none; }
}

/* Empty state — text-only, generous whitespace */
.mt-empty {
  text-align: center;
  max-width: var(--mt-form-max);
  margin-inline: auto;
  padding-block: var(--mt-space-16);
}
.mt-empty__title { font-family: var(--mt-font-heading); margin-bottom: var(--mt-space-3); }
.mt-empty__body { color: var(--mt-color-text-muted); margin-bottom: var(--mt-space-6); }

/* ---------------------------------------------------------------------------
   7. Header / navigation
--------------------------------------------------------------------------- */
.site-nav {
  background-color: var(--mt-color-surface);
  border-bottom: 1px solid var(--mt-color-border);
  box-shadow: var(--mt-shadow-sm);
  padding-block: var(--mt-space-3);
  margin-bottom: var(--mt-space-8);
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mt-space-2);
  text-decoration: none;
}
.site-brand__logo { height: 2rem; width: auto; display: block; }
.site-brand__wordmark {
  font-family: var(--mt-font-heading);
  font-weight: var(--mt-weight-bold);
  font-size: var(--mt-text-h5);
  letter-spacing: var(--mt-tracking-heading);
  color: var(--mt-color-ink);
}
.site-brand__accent { color: var(--mt-color-gold-text); }

.site-nav .nav-link {
  color: var(--mt-color-ink);
  font-weight: var(--mt-weight-medium);
  padding-inline: var(--mt-space-3);
  border-bottom: 2px solid transparent;
}
.site-nav .nav-link:hover {
  color: var(--mt-color-gold-text);
}
.site-nav .nav-link.active {
  color: var(--mt-color-ink);
  border-bottom-color: var(--mt-color-gold); /* gold active underline */
}
/* The sign-out control must be a form (POST), so its trigger is a <button>. These rules strip the
   browser's button chrome so it sits in the nav like its siblings; it keeps button semantics. */
.site-nav__logout { display: inline; margin: 0; }
.site-nav .site-nav__logout .nav-link {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
.site-nav .site-nav__logout .nav-link:focus-visible {
  outline: var(--mt-focus-outline);
  outline-offset: var(--mt-focus-offset);
}

.navbar-toggler { border-color: var(--mt-color-border-input); }
.navbar-toggler:focus {
  outline: var(--mt-focus-outline);
  outline-offset: var(--mt-focus-offset);
  box-shadow: var(--mt-focus-ring);
}

/* ---------------------------------------------------------------------------
   8. Footer — dark, warm, gold links
--------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--mt-color-ink);
  color: var(--mt-color-surface);
  padding-block: var(--mt-space-8);
  margin-top: var(--mt-space-16);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-2);
}
.site-footer__brand {
  font-family: var(--mt-font-heading);
  font-weight: var(--mt-weight-bold);
  margin: 0;
}
.site-footer__copy {
  color: var(--mt-color-border);
  font-size: var(--mt-text-sm);
  margin: 0;
}
.site-footer a {
  color: var(--mt-color-gold);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--mt-color-gold);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   9. Home hero (/)
--------------------------------------------------------------------------- */
.home-hero {
  max-width: var(--mt-content-max);
  margin-inline: auto;
  padding-block: var(--mt-space-16);
  text-align: center;
}
.home-hero__title { margin-bottom: var(--mt-space-4); }
.home-hero__lead {
  font-size: var(--mt-text-lg);
  color: var(--mt-color-text-secondary);
  max-width: 42ch;
  margin-inline: auto;
  margin-bottom: var(--mt-space-8);
}
.home-hero__actions {
  display: flex;
  gap: var(--mt-space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   10. Long-form prose (legal / content pages)
--------------------------------------------------------------------------- */
.prose {
  max-width: 64ch;
  margin-inline: auto;
  padding-block: var(--mt-space-8);
}
.prose p { color: var(--mt-color-text-secondary); }

/* ---------------------------------------------------------------------------
   9. Admin area (/gestion) — UC-13
   Built entirely from the existing tokens: the admin side is the same product,
   and a second palette would be a second thing to keep in step.
--------------------------------------------------------------------------- */
.gestion-header {
  background-color: var(--mt-color-surface-2);
  border-bottom: 1px solid var(--mt-color-border);
  margin-bottom: var(--mt-space-8);
}
.gestion-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mt-space-4);
  padding-block: var(--mt-space-4);
}
.gestion-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mt-space-2);
  text-decoration: none;
}
.gestion-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mt-space-6);
}
.gestion-nav a,
.gestion-nav__logout button {
  font-size: var(--mt-text-sm);
  color: var(--mt-color-text-secondary);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.gestion-nav a:hover,
.gestion-nav__logout button:hover {
  color: var(--mt-color-gold-text);
  text-decoration: underline;
}
.gestion-main { padding-bottom: var(--mt-space-12); }
.gestion-main h1 { margin-bottom: var(--mt-space-6); }
.gestion-main h2 {
  margin-top: var(--mt-space-8);
  margin-bottom: var(--mt-space-4);
}

/* Counters. Each is a link into the list filtered to the segment it counts, so they are sized and
   spaced as targets rather than as decoration. */
.gestion-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--mt-space-4);
  list-style: none;
  padding: 0;
  margin-bottom: var(--mt-space-8);
}
.gestion-counters li > a,
.gestion-counters li > span {
  display: block;
  height: 100%;
  padding: var(--mt-space-4);
  background-color: var(--mt-color-surface);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  box-shadow: var(--mt-shadow-sm);
  color: var(--mt-color-text-secondary);
  font-size: var(--mt-text-sm);
  text-decoration: none;
}
.gestion-counters li > a:hover {
  border-color: var(--mt-color-gold);
  color: var(--mt-color-ink);
}
.gestion-counters strong {
  display: block;
  font-size: var(--mt-text-h4);
  line-height: 1.1;
  color: var(--mt-color-ink);
}

/* Visible para un lector de pantalla, invisible en pantalla. El patrón de recorte de siempre, no
   `display:none` ni `visibility:hidden`: esos dos lo esconden TAMBIÉN del lector, que es lo
   contrario de lo que se busca. Se usa en los <legend> del formulario de edición, donde el título
   visible es un <h2> encima del grupo y el legend sigue siendo el nombre accesible del fieldset —
   quitarlo dejaría la agrupación sin nombre para quien la escucha. */
.mt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* El título de cada grupo de datos, fuera de su caja. Antes el nombre vivía dentro, en el legend,
   y un formulario de cuatro cajas se leía como cuatro rectángulos sin encabezar. */
.gestion-grupo {
  margin: var(--mt-space-6) 0 var(--mt-space-3);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-text-lg);
  color: var(--mt-color-ink);
}
.gestion-grupo:first-of-type {
  margin-top: 0;
}

/* La casilla de facturación: pequeña, a la izquierda y alineada con su texto. Sin el `min-height`
   a 0 hereda los 44 px de los inputs del formulario y se dibuja como un cuadro enorme al lado de
   una línea de texto. `flex-start` en vez de `center` porque el texto envuelve a dos líneas en un
   móvil y la casilla debe quedarse con la primera, no flotar en el medio. */
.gestion-check {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--mt-space-2);
  font-size: var(--mt-text-sm);
  cursor: pointer;
}
.gestion-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0.15rem 0 0;
}

/* Las acciones del formulario, ancladas al pie en cuanto algo cambia.
   `position: sticky` y no `fixed`: sticky se queda dentro del flujo, así que no tapa el final del
   formulario ni obliga a compensar con padding en el body. Sólo aparece cuando hay algo que
   guardar — la clase la pone el script, y sólo DESPUÉS de haber enganchado lo que la retira. */
.gestion-acciones-fijas {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: var(--mt-space-3) var(--mt-space-4);
  margin-top: var(--mt-space-6);
  background-color: var(--mt-color-surface);
  border-top: 1px solid var(--mt-color-border);
  box-shadow: 0 -2px 8px rgb(0 0 0 / 8%);
  /* Oculto de verdad para el teclado y el lector, no sólo transparente: unos botones invisibles
     pero tabulables son peores que ausentes. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.gestion-acciones-fijas.is-visible {
  visibility: visible;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gestion-acciones-fijas {
    transition: none;
    transform: none;
  }
}

/* El contador cuyo filtro está puesto. El tinte dorado es el token que el sistema ya reserva para
   "fila seleccionada", así que un filtro activo se lee igual que cualquier otra selección del
   producto en vez de inventarse un color propio.
   Fondo Y borde Y peso: el color solo no basta —hay quien no lo distingue— y el atributo
   aria-pressed del marcado dice lo mismo para quien escucha la página. */
.gestion-counters li > a.is-activo {
  background-color: var(--mt-color-gold-tint);
  border-color: var(--mt-color-gold);
  color: var(--mt-color-gold-text);
  font-weight: 700;
}
.gestion-counters li > a.is-activo:hover {
  background-color: var(--mt-color-gold);
  color: var(--mt-color-ink);
}

/* Cabeceras que ordenan. El enlace ocupa toda la celda para que el objetivo del clic sea la
   cabecera entera y no las siete letras del texto. */
.gestion-tabla th a {
  display: block;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.gestion-tabla th a:hover,
.gestion-tabla th a:focus-visible {
  text-decoration: underline;
}
/* La columna activa se marca además del texto de la flecha: en una fila de siete cabeceras, una
   flecha sola es difícil de encontrar de un vistazo. */
.gestion-tabla th.is-sorted a {
  font-weight: 700;
}

/* La paginación, debajo de la tabla. Envuelve en un móvil en vez de empujar la tabla a scroll
   horizontal: el tamaño y las páginas son dos grupos y pueden ir en dos líneas sin perder nada. */
.gestion-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mt-space-4);
  margin-top: var(--mt-space-4);
  font-size: var(--mt-text-sm);
  color: var(--mt-color-text-secondary);
}
.gestion-paginacion__tamano,
.gestion-paginacion__paginas {
  display: flex;
  align-items: center;
  gap: var(--mt-space-3);
}
/* El tamaño activo se marca con <strong>, no con un enlace deshabilitado: un enlace que no lleva a
   ninguna parte es una trampa para el teclado. */
.gestion-paginacion__tamano strong {
  color: var(--mt-color-ink);
}

.gestion-filtros {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--mt-space-4);
  padding: var(--mt-space-4);
  background-color: var(--mt-color-surface-2);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  margin-bottom: var(--mt-space-6);
}
.gestion-filtros label {
  display: block;
  font-size: var(--mt-text-sm);
  color: var(--mt-color-text-secondary);
}
/* El buscador comparte exactamente la caja del desplegable — misma altura, mismo borde, mismo
   radio — para que la barra de filtros lea como una fila de controles y no como un input suelto
   pegado al lado de dos selects. */
.gestion-filtros select,
.gestion-filtros input {
  min-height: 44px;
  padding: var(--mt-space-2) var(--mt-space-3);
  font-family: var(--mt-font-body);
  font-size: var(--mt-text-base);
  color: var(--mt-color-ink);
  background-color: var(--mt-color-surface);
  border: 1px solid var(--mt-color-border-input);
  border-radius: var(--mt-radius-sm);
}
.gestion-filtros input {
  /* Ancho propio: un input auto-dimensionado se queda en dos caracteres y no invita a escribir en
     él. Con `ch` la caja mide lo que mide un apellido, no lo que mida la fuente. */
  min-width: 22ch;
}
.gestion-filtros input::placeholder {
  color: var(--mt-color-text-secondary);
}
.gestion-filtros select:focus,
.gestion-filtros input:focus {
  border-color: var(--mt-color-ink);
  outline: var(--mt-focus-outline);
  outline-offset: var(--mt-focus-offset);
  box-shadow: var(--mt-focus-ring);
}

/* Tables scroll inside their own box rather than pushing the page sideways: the member detail is
   wide and this area is used on laptops as often as on desks. */
/* The scroll lives on a wrapper, not on the table. `display: block` on a <table> makes the box
   100% wide while the table inside collapses to its content — which is why this looked narrow. */
.gestion-tabla-scroll {
  overflow-x: auto;
  margin-bottom: var(--mt-space-6);
}
.gestion-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mt-text-sm);
}
.gestion-tabla th,
.gestion-tabla td {
  text-align: left;
  padding: var(--mt-space-3) var(--mt-space-4);
  border-bottom: 1px solid var(--mt-color-border);
  vertical-align: middle;
}
/* Dates and the badge never wrap; the name and the email may, so the table can actually fill. */
.gestion-tabla td:nth-child(n+3),
.gestion-tabla th:nth-child(n+3) { white-space: nowrap; }
.gestion-tabla td:nth-child(2) { word-break: break-word; }
.gestion-tabla th {
  font-weight: var(--mt-weight-medium);
  color: var(--mt-color-text-secondary);
  border-bottom-width: 2px;
}
.gestion-tabla tbody tr:hover { background-color: var(--mt-color-surface-2); }
.gestion-tabla td code {
  font-size: var(--mt-text-sm);
  color: var(--mt-color-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.gestion-ficha {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: var(--mt-space-2) var(--mt-space-6);
  padding: var(--mt-space-6);
  background-color: var(--mt-color-surface);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  box-shadow: var(--mt-shadow-sm);
  margin-bottom: var(--mt-space-6);
}
.gestion-ficha dt {
  font-size: var(--mt-text-sm);
  font-weight: var(--mt-weight-medium);
  color: var(--mt-color-text-secondary);
}
.gestion-ficha dd {
  margin: 0;
  color: var(--mt-color-ink);
  word-break: break-word;
}

.gestion-vacio {
  padding: var(--mt-space-6);
  background-color: var(--mt-color-surface-2);
  border: 1px dashed var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  color: var(--mt-color-text-secondary);
}

@media (max-width: 600px) {
  .gestion-ficha { grid-template-columns: 1fr; }
  .gestion-ficha dd { margin-bottom: var(--mt-space-3); }
}

/* Status badge. In a list of two hundred rows the status is the column the eye lands on, so it
   carries a tone as well as a word — but the word is always there, because colour alone is not a
   signal anyone can rely on. Warm palette only, reusing the semantic tokens. */
.gestion-badge {
  display: inline-block;
  padding: 0.125rem var(--mt-space-2);
  border-radius: var(--mt-radius-sm);
  font-size: var(--mt-text-caption);
  font-weight: var(--mt-weight-medium);
  white-space: nowrap;
  border: 1px solid transparent;
}
.gestion-badge--ok {
  color: var(--mt-color-success);
  background-color: var(--mt-color-success-bg);
  border-color: var(--mt-color-success);
}
.gestion-badge--warn {
  color: var(--mt-color-warning);
  background-color: var(--mt-color-warning-bg);
  border-color: var(--mt-color-warning);
}
.gestion-badge--danger {
  color: var(--mt-color-danger);
  background-color: var(--mt-color-danger-bg);
  border-color: var(--mt-color-danger);
}
.gestion-badge--muted {
  color: var(--mt-color-text-secondary);
  background-color: var(--mt-color-surface-2);
  border-color: var(--mt-color-border);
}

.gestion-lead {
  color: var(--mt-color-text-secondary);
  margin-top: calc(-1 * var(--mt-space-4));
  margin-bottom: var(--mt-space-6);
}

/* The detail is three questions, not one column of eighteen rows. */
.gestion-bloque { margin-bottom: var(--mt-space-8); }
.gestion-bloque h2 {
  font-size: var(--mt-text-h5);
  margin-top: 0;
  margin-bottom: var(--mt-space-3);
  padding-bottom: var(--mt-space-2);
  border-bottom: 1px solid var(--mt-color-border);
}

/* Rows read as rows: a quiet stripe plus the hover already defined above. The name column keeps its
   full width while the rest may compress, because it is what the eye scans down. */
.gestion-tabla tbody tr:nth-child(even) { background-color: var(--mt-color-surface-2); }
.gestion-tabla tbody tr:nth-child(even):hover { background-color: var(--mt-color-surface-3); }
.gestion-tabla td:first-child { font-weight: var(--mt-weight-medium); }
.gestion-tabla td:first-child a { color: var(--mt-color-ink); }
.gestion-tabla td:first-child a:hover { color: var(--mt-color-gold-text); }

/* UC-14 — the manual-edit surface. The warning is the reason the screen exists, so it is given the
   weight of a warning rather than the weight of a note. */
.gestion-aviso {
  padding: var(--mt-space-4);
  margin-bottom: var(--mt-space-6);
  background-color: var(--mt-color-warning-bg);
  border-left: 3px solid var(--mt-color-warning);
  border-radius: var(--mt-radius-sm);
  color: var(--mt-color-ink);
  font-size: var(--mt-text-sm);
}
.gestion-confirmacion {
  padding: var(--mt-space-3) var(--mt-space-4);
  margin-bottom: var(--mt-space-6);
  background-color: var(--mt-color-success-bg);
  border-left: 3px solid var(--mt-color-success);
  border-radius: var(--mt-radius-sm);
  font-size: var(--mt-text-sm);
}
.gestion-formulario fieldset {
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
  padding: var(--mt-space-4);
  margin-bottom: var(--mt-space-6);
}
.gestion-formulario legend {
  font-size: var(--mt-text-sm);
  font-weight: var(--mt-weight-medium);
  color: var(--mt-color-text-secondary);
  padding-inline: var(--mt-space-2);
}
.gestion-formulario input,
.gestion-formulario select {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: var(--mt-space-2) var(--mt-space-3);
  font-family: var(--mt-font-body);
  font-size: var(--mt-text-base);
  color: var(--mt-color-ink);
  background-color: var(--mt-color-surface);
  border: 1px solid var(--mt-color-border-input);
  border-radius: var(--mt-radius-sm);
}
.gestion-formulario input[aria-invalid="true"] {
  border-color: var(--mt-color-danger);
  border-width: 2px;
}
.gestion-formulario input:disabled {
  background-color: var(--mt-color-disabled-bg);
  color: var(--mt-color-disabled-text);
}
.gestion-acciones {
  display: flex;
  align-items: center;
  gap: var(--mt-space-4);
}

/* superadmin-role — la salida por delante del expediente. Esta página pinta el DNI, el teléfono y
   la dirección de una persona, y leerla queda auditado: caer en el socio equivocado debe costar un
   vistazo, no un scroll por encima de todo lo que es. */
.gestion-volver {
  margin-bottom: var(--mt-space-4);
}

/* La acción a la que se viene, y que antes vivía debajo de una tabla lo bastante larga como para
   enterrarla. Centrada porque no compite con nada a su lado. */
.gestion-editar {
  margin: var(--mt-space-8) 0;
  text-align: center;
}

/* Un escalón por encima del botón normal, con los mismos tokens: nada de tamaños sueltos. */
.mt-btn--lg {
  padding: var(--mt-space-4) var(--mt-space-12);
  font-size: 1.125rem;
}

.gestion-acciones-bloque {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mt-space-4);
  margin-bottom: var(--mt-space-8);
}
.gestion-acciones-bloque form {
  padding: var(--mt-space-4);
  background-color: var(--mt-color-surface-2);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-md);
}
.gestion-acciones-bloque input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  margin-bottom: var(--mt-space-3);
  padding: var(--mt-space-2) var(--mt-space-3);
  border: 1px solid var(--mt-color-border-input);
  border-radius: var(--mt-radius-sm);
}

/* A clickable row. The pointer is the whole affordance — without it the row looks inert and nobody
   discovers it — and the name keeps a real underline on hover so the keyboard path stays visible. */
.gestion-tabla--clicable tbody tr { cursor: pointer; }
.gestion-tabla--clicable tbody tr:hover td:first-child a { text-decoration: underline; }
.gestion-filtros > div { display: flex; flex-direction: column; gap: var(--mt-space-2); }

/* billing-data — the collapsible billing block on /mi-cuenta/datos. Same shape as the signup
   form's, from the shared field vocabulary rather than a second copy of it. */
.member-data__billing {
    margin-top: var(--mt-space-4);
    padding-left: var(--mt-space-4);
    border-left: 2px solid var(--mt-color-border);
}

.member-data__billing[hidden] {
    display: none;
}

.field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: var(--mt-space-2);
    font-weight: var(--mt-weight-regular);
}

.field--checkbox input {
    width: auto;
    min-height: 0;
    margin-top: var(--mt-space-1);
    accent-color: var(--mt-color-gold-active);
}