:root {
  /* Solo tienes que cambiar estas dos rutas si tus imágenes tienen otro nombre. */
  --logo-image: url("img/logo.png");
  --background-image: url("img/fondo.png");

  --primary: #0033a0;
  --primary-strong: #0033a0;
  --primary-soft: #eaf2ff;
  --navy: #0033a0;
  --navy-2: #0033a0;
  --text: #0033a0;
  --muted: #60708f;
  --line: #d5dfef;
  --line-strong: #bfd0e8;
  --surface: rgba(255, 255, 255, .94);
  --surface-solid: #ffffff;
  --success: #07945c;
  --success-bg: #e8f7f0;
  --danger: #e2372d;
  --danger-bg: #fff0ee;
  --warning: #d69219;
  --shadow: 0 18px 46px -26px rgba(3, 35, 86, .42), 0 3px 12px rgba(12, 42, 92, .08);
  --shadow-soft: 0 8px 26px rgba(10, 53, 119, .08);
  --radius: 18px;
  --content-indent: 132px;
  --content-width: 1240px;
  --sans: 'Inter', 'Segoe UI', Arial, sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;

  /* Alias para conservar la compatibilidad con el JS existente. */
  --ink: var(--text);
  --ink-soft: var(--muted);
  --paper: #f5f8fd;
  --paper-deep: #edf3fb;
  --card: #fff;
  --card-deep: #f7f9fc;
  --brass: var(--primary);
  --brass-deep: var(--primary-strong);
  --teal: var(--primary);
  --teal-deep: var(--navy);
  --error: var(--danger);
  --white: #fff;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  background-color: #f5f8fd;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)),
    var(--background-image);
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  overflow-x: hidden;
}


button,
input,
select {
  font: inherit;
}

a.btn {
  text-decoration: none;
}

a[hidden],
button[hidden],
div[hidden],
section[hidden],
span[hidden] {
  display: none !important;
}

.app {
  width: min(100%, 1540px);
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  position: relative;
}

/* -------------------------------------------------------------------------- */
/* CABECERA                                                                    */
/* -------------------------------------------------------------------------- */
.app-header {
  min-height: 132px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 16px;
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-width: 470px;
}

.brand-logo {
  width: 122px;
  height: 136px;
  flex: 0 0 auto;
  background-image: var(--logo-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.brand-copy {
  padding-top: 22px;
  min-width: 0;
}

.brand h1 {
  margin: 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(38px, 3.3vw, 49px);
  line-height: .95;
  letter-spacing: .015em;
  text-transform: uppercase;
  font-weight: 800;
}

.brand h2 {
  margin: 0;
  color: #ad9f84;
  font-family: var(--display);
  font-size: clamp(38px, 3.3vw, 48px);
  line-height: .95;
  letter-spacing: .0005em;
  text-transform: uppercase;
  font-weight: 100;
}

.brand-subtitle,
.eyebrow {
  display: block;
  margin-top: 12px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.auth-controls {
  padding-top: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.admin-badge {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.admin-user-label {
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px 0 44px;
  border: 1px solid #dae4f3;
  border-radius: 16px;
  color: var(--navy);
  background: rgba(244, 248, 254, .9);
  box-shadow: 0 4px 14px rgba(6, 48, 113, .04) inset;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
}

.admin-user-label::before {
  content: '';
  position: absolute;
  left: 18px;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  top: 10px;
}

.admin-user-label::after {
  content: '';
  position: absolute;
  left: 15px;
  bottom: 9px;
  width: 22px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 0;
}

.admin-user-label b,
.admin-user-label strong {
  color: var(--primary);
}

/* -------------------------------------------------------------------------- */
/* BOTONES                                                                     */
/* -------------------------------------------------------------------------- */
.btn {
  appearance: none;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 20px;
  border: 1.5px solid transparent;
  border-radius: 11px;
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(4, 49, 119, .025);
  transition: transform .14s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.btn svg,
.nav-link svg,
.section-heading svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(5, 66, 160, .09);
}

.btn:active {
  transform: translateY(0) scale(.985);
}

.btn:disabled {
  opacity: .52;
  cursor: not-allowed;
  transform: none;
}

.btn:focus-visible,
input:focus-visible,
select:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid rgba(7, 87, 230, .2);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}

.btn-outline {
  background: rgba(255, 255, 255, .84);
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline:hover:not(:disabled) {
  background: var(--primary-soft);
}

.btn-danger {
  background: rgba(255, 255, 255, .86);
  color: var(--danger);
  border-color: #f25a51;
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-bg);
}

.btn-brass {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-brass:hover:not(:disabled) {
  background: var(--primary-strong);
}

.btn-sm {
  min-height: 46px;
  padding: 9px 17px;
  font-size: 13px;
}

/* -------------------------------------------------------------------------- */
/* NAVEGACIÓN                                                                  */
/* -------------------------------------------------------------------------- */
.main-nav {
  width: min(var(--content-width), calc(100% - var(--content-indent)));
  margin: 0 0 0 var(--content-indent);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.nav-link {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 14px 26px 13px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  color: #536786;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: color .15s ease, background .15s ease;
}

.nav-link:hover {
  color: var(--primary);
  background: rgba(255, 255, 255, .46);
}

.nav-link.active {
  color: var(--primary);
  background: rgba(255, 255, 255, .96);
  border-color: var(--line-strong);
  font-weight: 700;
  box-shadow: 0 -5px 18px rgba(8, 57, 127, .035);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 4px;
  border-radius: 6px 6px 0 0;
  background: var(--primary);
}

/* -------------------------------------------------------------------------- */
/* PANEL PRINCIPAL                                                             */
/* -------------------------------------------------------------------------- */
.single-panel {
  width: min(var(--content-width), calc(100% - var(--content-indent)));
  margin-left: var(--content-indent);
  min-height: 310px;
  padding: 36px 50px 30px;
  border: 1px solid var(--line-strong);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(3px);
}

.panel-title {
  margin: 0 0 7px;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.025em;
}

#scanTitle {
  display: flex;
  align-items: center;
  gap: 15px;
}

.panel-sub {
  max-width: 850px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.section-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

/* -------------------------------------------------------------------------- */
/* FORMULARIOS                                                                 */
/* -------------------------------------------------------------------------- */
.registrar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr);
  gap: 54px;
  align-items: start;
}

.socio-form {
  display: flex;
  flex-direction: column;
  gap: 11px !important;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field label {
  color: #425576;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: none;
}

.field input,
.field select,
.search-input,
.modal input,
.modal select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cdd9e9;
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  color: var(--navy);
  padding: 11px 14px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.field input::placeholder,
.search-input::placeholder {
  color: #99a6ba;
}

.field input:focus,
.field select:focus,
.search-input:focus,
.modal input:focus,
.modal select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(7, 87, 230, .11);
  background: #fff;
}

.req {
  color: var(--danger);
}

.field-help {
  color: #7a8aa3;
  font-size: 11.5px;
  line-height: 1.45;
}

.error-text {
  min-height: 18px;
  color: var(--danger);
  font-size: 13px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid #d5e0ef;
  border-radius: 11px;
  background: rgba(249, 251, 255, .92);
  cursor: pointer;
}

.check-row input {
  margin-top: 3px;
  accent-color: var(--primary);
}

.check-row span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.check-row strong {
  color: var(--navy);
  font-size: 14px;
}

.check-row small {
  color: var(--muted);
  font-size: 12px;
}

/* -------------------------------------------------------------------------- */
/* QR DE REGISTRO                                                              */
/* -------------------------------------------------------------------------- */
.qr-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 24px;
  border: 1px solid #d4dfef;
  border-radius: 15px;
  background: rgba(249, 251, 255, .78);
  text-align: center;
}

.qr-box {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #ced9e9;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.qr-box canvas,
.qr-box img {
  width: 100% !important;
  height: 100% !important;
}

.placeholder-txt {
  color: var(--muted);
  font-size: 12px;
  padding: 16px;
}

.qr-id-text {
  font-family: var(--mono);
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
}

.qr-meta-text {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------- */
/* LISTADO DE SOCIOS                                                           */
/* -------------------------------------------------------------------------- */
.socios-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.search-input {
  flex: 1;
  min-width: 270px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eef3fa;
  color: #536783;
  font-size: 11.5px;
  font-weight: 700;
}

.badge-admin {
  background: var(--primary-soft);
  color: var(--primary);
}

.badge-first {
  background: #fff5df;
  color: #9a6812;
}

.list-message {
  min-height: 20px;
  margin: 0 0 8px;
  color: var(--primary);
  font-size: 13px;
}

.list-message.error {
  color: var(--danger);
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d7e0ec;
  border-radius: 13px;
  background: #fff;
}

.socios-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  color: #23395d;
  font-size: 12.7px;
}

.socios-table th {
  padding: 13px 14px;
  border-bottom: 1px solid #d7e0ec;
  background: #f5f8fc;
  color: #60728f;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}

.socios-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #e5ebf3;
  vertical-align: middle;
  text-align: left;
}

.socios-table tbody tr:last-child td {
  border-bottom: 0;
}

.socios-table tr:hover td {
  background: #f8fbff;
}

.socios-table th:last-child,
.socios-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.cell-id,
.dni-cell {
  font-family: var(--mono);
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}

.cell-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.socios-table .btn {
  min-width: 62px;
  min-height: 33px;
  padding: 6px 9px;
  border-width: 1px;
  border-radius: 8px;
  font-size: 11px;
}

.table-select {
  min-width: 145px;
  border: 1px solid #cdd9e9;
  border-radius: 8px;
  background: #fff;
  padding: 8px 9px;
}

.loading,
.empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* -------------------------------------------------------------------------- */
/* ESCÁNER                                                                     */
/* -------------------------------------------------------------------------- */
.scan-grid {
  display: grid;
  grid-template-columns: minmax(420px, .95fr) minmax(470px, 1.1fr);
  gap: 58px;
  align-items: start;
}

.scan-frame {
  position: relative;
  width: 100%;
  max-width: 505px;
  aspect-ratio: 1.30 / 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #071b3f;
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 48%, rgba(22, 70, 128, .20), transparent 34%),
    linear-gradient(145deg, #061b3c, #02132c 62%, #041b42);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 9px 18px rgba(0, 24, 59, .18), inset 0 0 44px rgba(0, 0, 0, .18);
}

.scan-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.idle-msg {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: rgba(255, 255, 255, .93);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
  padding: 28px;
}

.camera-idle-icon {
  width: 54px;
  height: 54px;
  color: rgba(137, 174, 226, .30);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scan-corner {
  position: absolute;
  width: 43px;
  height: 43px;
  border: 4px solid #49a4ff;
  pointer-events: none;
  filter: drop-shadow(0 0 5px #0b74ff);
}

.scan-corner.tl {
  top: 18px;
  left: 18px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 11px 0 0;
}

.scan-corner.tr {
  top: 18px;
  right: 18px;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 11px 0 0;
}

.scan-corner.bl {
  bottom: 18px;
  left: 18px;
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 11px;
}

.scan-corner.br {
  right: 18px;
  bottom: 18px;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 11px;
}

.scan-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.scan-controls .btn-primary {
  min-width: 220px;
}

.upload-fallback {
  margin-top: 18px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.upload-fallback label {
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.result-panel {
  min-height: 422px;
  padding: 26px 28px;
  border: 1px solid #ced9e8;
  border-radius: 15px;
  background: rgba(255, 255, 255, .72);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(10, 53, 119, .025);
}

.result-empty {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}

.scan-result {
  width: 100%;
  color: var(--text);
}

.scan-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}



.scan-result-title {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--success);
  font-size: 42px;
  /* Aumentado de 37px */
  font-weight: 800;
  /* Mayor grosor para mejor lectura */
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.scan-result.denied .scan-result-title {
  color: var(--danger);
}

.status-mark {
  width: 54px;
  /* Aumentado de 42px */
  height: 54px;
  flex: 0 0 auto;
  /* Evita que el círculo se deforme */
  display: inline-grid;
  place-items: center;
  border: 3px solid currentColor;
  /* Borde más visible */
  border-radius: 50%;
  font-size: 38px;
  font-weight: 800;
}

.scan-time {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.access-data-list {
  border-top: 1px solid #e0e6ef;
}

.access-data-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px 1.1fr 1.25fr;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e0e6ef;
  color: var(--navy);
}



.access-data-icon.round {
  border-radius: 50%;
}

.access-data-label {
  color: #213a63;
  font-size: 14px;
  font-weight: 500;
}

.access-data-value {
  color: #10285a;
  font-size: 14px;
  font-weight: 800;
}

.access-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 7px 13px;
  border-radius: 9px;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid #c2ead9;
  font-size: 12px;
  font-weight: 800;
}

.access-status::before {
  content: '✓';
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 12px;
}

.scan-result.denied .access-status {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #f5c9c4;
}

.scan-result.denied .access-status::before {
  content: '×';
  background: var(--danger);
}

.access-notice {
  margin-top: 18px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 14px;
  border: 1px solid #cfe0fa;
  border-radius: 10px;
  background: #edf4ff;
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 600;
}

.access-notice::before {
  content: '✓';
  width: 21px;
  height: 25px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 6px 6px 8px 8px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
}

.scan-result.denied .access-notice {
  border-color: #f3d0cc;
  background: #fff4f2;
  color: var(--danger);
}

.scan-result.denied .access-notice::before {
  content: '!';
  background: var(--danger);
}

/* Compatibilidad con resultados antiguos, por si hay HTML cacheado. */
.icon-large {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
}

.result-success {
  color: var(--success);
  text-align: center;
}

.result-error {
  color: var(--danger);
  text-align: center;
}

.result-success .name,
.result-error .name {
  color: var(--navy);
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 6px;
}

.result-success .meta,
.result-error .meta {
  color: var(--muted);
  font-size: 13px;
}

.person-data-grid {
  width: min(100%, 440px);
  margin: 14px auto 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  text-align: left;
}

.person-data-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
}

.person-data-row:last-child {
  border-bottom: 0;
}

.person-data-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.person-data-row strong {
  color: var(--navy);
}

/* -------------------------------------------------------------------------- */
/* JORNADAS                                                                    */
/* -------------------------------------------------------------------------- */
.jornadas-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.jornada-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 17px 20px;
  border: 1px solid #d4deec;
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.jornada-card:hover {
  border-color: #80adf4;
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.jornada-info h3 {
  margin: 0 0 5px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 800;
}

.jornada-info p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.jornadas-admin-list {
  margin-top: 14px;
  border: 1px solid #d9e1ed;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  max-height: clamp(360px, 45dvh, 620px);
}

.jornada-admin-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-bottom: 1px solid #e3e8f0;
  font-size: 13px;
}

.jornada-admin-item:last-child {
  border-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* MODALES Y AVISOS                                                            */
/* -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 19, 48, .58);
  backdrop-filter: blur(3px);
}

.modal-overlay.show {
  display: flex;
}

.modal {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 28px;
  border: 1px solid #d1dceb;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 20, 56, .28);
}

.modal h3 {
  margin: 0 0 7px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
}

.modal-sub {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.modal .field {
  margin-bottom: 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.modal-error {
  min-height: 18px;
  margin-top: 3px;
  color: var(--danger);
  font-size: 12.5px;
}

.action-confirm-overlay {
  z-index: 120;
}

.action-confirm-modal {
  max-width: 470px;
}

.action-confirm-modal .modal-sub {
  font-size: 14px;
  margin-top: 10px;
}

.action-confirm-modal .btn-danger {
  min-width: 130px;
}

.app-toast {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 100;
  max-width: min(420px, calc(100vw - 28px));
  padding: 13px 17px;
  border: 1px solid #d5dfec;
  border-left: 4px solid var(--primary);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(6, 32, 76, .18);
  color: var(--navy);
  font-size: 13px;
  font-weight: 650;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.app-toast-success {
  border-left-color: var(--success);
}

.app-toast-error {
  border-left-color: var(--danger);
}

.app-toast-warning {
  border-left-color: var(--warning);
}

.person-name {
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
}

.person-data {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px auto 10px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
}

.person-data span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.person-data strong {
  font-family: var(--mono);
}

/* -------------------------------------------------------------------------- */
/* PIE DE MARCA                                                                */
/* -------------------------------------------------------------------------- */
.brand-footer {
  width: min(var(--content-width), calc(100% - var(--content-indent)));
  margin: 34px 0 34px var(--content-indent);
  display: flex;
  flex-direction: column;
  /* Apila el texto arriba y las barras abajo */
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Espacio entre el texto y las barras */
  color: #142f64;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.brand-footer .bars {
  display: flex;
  gap: 10px;
  /* Espacio horizontal entre cada barra */
  align-items: center;
}

.brand-footer strong {
  color: var(--primary);
  font-weight: 800;
}

.brand-footer .bar {
  width: 55px;
  height: 6px;
  background: var(--primary);
  box-sizing: border-box;
  /* Asegura que la barra con borde mantenga los 6px de alto */
}

.brand-footer .bar.light {
  background: transparent;
  border: 2px solid #93b7f7;
}

.foot-note {
  width: min(var(--content-width), calc(100% - var(--content-indent)));
  margin: 14px 0 0 var(--content-indent);
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}

.offscreen {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 650px;
  height: 650px;
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE                                                                  */
/* -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
  :root {
    --content-indent: 105px;
    --content-width: 1120px;
  }

  .app-header {
    gap: 18px;
  }

  .brand {
    min-width: 420px;
    gap: 18px;
  }

  .brand-logo {
    width: 105px;
    height: 124px;
  }

  .brand h1 {
    font-size: 42px;
  }

  .brand-subtitle {
    font-size: 14px;
  }

  .admin-badge {
    gap: 8px;
  }

  .btn-sm {
    padding-left: 13px;
    padding-right: 13px;
  }

  .single-panel {
    padding-left: 38px;
    padding-right: 38px;
  }

  .scan-grid {
    grid-template-columns: minmax(370px, .95fr) minmax(420px, 1.05fr);
    gap: 38px;
  }
}

@media (max-width: 1120px) {
  body {
    padding: 22px 18px 36px;
    background-attachment: scroll, scroll;
  }

  body::before {
    display: none;
  }

  :root {
    --content-indent: 0px;
    --content-width: 100%;
  }

  .app-header {
    min-height: 0;
    align-items: center;
    flex-direction: column;
  }

  .brand {
    width: 100%;
    min-width: 0;
  }

  .auth-controls {
    width: 100%;
    padding-top: 0;
    justify-content: flex-start;
  }

  .admin-badge {
    justify-content: flex-start;
  }

  .main-nav,
  .single-panel,
  .brand-footer,
  .foot-note {
    width: 100%;
    margin-left: 0;
  }

  .scan-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
}

@media (max-width: 820px) {
  body {
    padding: 16px 10px 30px;
  }

  .brand-logo {
    width: 80px;
    height: 100px;
  }

  .brand-copy {
    padding-top: 15px;
  }

  .brand h1 {
    font-size: 34px;
  }

  .brand-subtitle {
    white-space: normal;
    font-size: 12px;
  }

  .admin-badge {
    width: 100%;
  }

  .admin-user-label {
    width: 100%;
  }

  .auth-controls>.btn {
    width: 100%;
  }

  .main-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 2px;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    min-width: max-content;
    min-height: 50px;
    padding: 12px 17px;
  }

  .single-panel {
    padding: 26px 20px;
    border-radius: 0 14px 14px 14px;
  }

  .registrar-grid,
  .scan-grid {
    grid-template-columns: 1fr;
  }

  .scan-grid {
    gap: 28px;
  }

  .scan-frame {
    max-width: 560px;
  }

  .result-panel {
    min-height: 360px;
  }

  .section-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-topline .btn {
    align-self: flex-start;
  }

  .brand-footer {
    margin-top: 24px;
    font-size: 14px;
    letter-spacing: .22em;
  }

  .brand-footer .bar {
    width: 35px;
  }
}

@media (max-width: 520px) {
  .brand {
    gap: 12px;
  }

  .brand-logo {
    width: 64px;
    height: 82px;
  }

  .brand h1 {
    font-size: 29px;
  }

  .brand-subtitle {
    margin-top: 6px;
    font-size: 10.5px;
  }

  .admin-badge .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 135px;
  }

  .single-panel {
    padding: 22px 15px;
  }

  .panel-title {
    font-size: 22px;
  }

  .scan-frame {
    border-radius: 13px;
  }

  .result-panel {
    padding: 20px 16px;
  }

  .scan-result-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .access-data-row {
    grid-template-columns: 28px 95px 1fr;
  }

  .access-data-label,
  .access-data-value {
    font-size: 12.5px;
  }

  .modal {
    padding: 22px 18px;
  }

  .modal-actions {
    flex-direction: column-reverse;
  }

  .modal-actions .btn {
    width: 100%;
  }

  .brand-footer {
    gap: 6px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */
/* RESULTADO DEL ESCÁNER EN POPUP                                             */
/* -------------------------------------------------------------------------- */
.scan-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 18, 45, .58);
  backdrop-filter: blur(4px);
}

.scan-result-overlay.show {
  display: flex;
}

.scan-result-popup {
  position: relative;
  width: min(660px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 30px;
  border: 1px solid #cdd9e9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(3, 27, 67, .28);
}

.scan-result-actions {
  display: flex;
  justify-content: space-evenly;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e0e6ef;
}

.scan-result-actions .scan-result-close {
  min-width: 140px;
}

.admin-password-help {
  display: block;
  margin-top: -4px;
  margin-bottom: 14px;
}

.jornadas-season-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
}

.jornadas-season-header h3 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
}

.season-field {
  min-width: 150px;
  margin: 0 !important;
}

.season-field label {
  font-size: 11px;
}

@media (max-width: 700px) {
  .scan-result-overlay {
    padding: 12px;
  }

  .scan-result-popup {
    padding: 24px 18px;
  }

  .scan-result-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .scan-result-actions .scan-result-close {
    width: 100%;
  }

  .access-data-row {
    grid-template-columns: 28px .9fr 1.2fr;
  }

  .jornadas-season-header {
    align-items: stretch;
    flex-direction: column;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=League+Gothic&family=Montserrat:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  /* Solo tienes que cambiar estas dos rutas si tus imágenes tienen otro nombre. */
  --logo-image: url("img/logo.png");
  --background-image: url("img/fondo.png");

  --primary: #0033a0;
  --primary-strong: #0033a0;
  --primary-soft: #eaf2ff;
  --navy: #0033a0;
  --navy-2: #0033a0;
  --text: #0033a0;
  --muted: #60708f;
  --line: #d5dfef;
  --line-strong: #bfd0e8;
  --surface: rgba(255, 255, 255, .94);
  --surface-solid: #ffffff;
  --success: #07945c;
  --success-bg: #e8f7f0;
  --danger: #e2372d;
  --danger-bg: #fff0ee;
  --warning: #d69219;
  --shadow: 0 18px 46px -26px rgba(3, 35, 86, .42), 0 3px 12px rgba(12, 42, 92, .08);
  --shadow-soft: 0 8px 26px rgba(10, 53, 119, .08);
  --radius: 18px;
  --content-indent: 132px;
  --content-width: 1240px;

  /* Nuevas tipografías */
  --sans: 'Montserrat', sans-serif;
  --display: 'League Gothic', 'Bebas Neue', sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;

  /* Alias para conservar la compatibilidad con el JS existente. */
  --ink: var(--text);
  --ink-soft: var(--muted);
  --paper: #f5f8fd;
  --paper-deep: #edf3fb;
  --card: #fff;
  --card-deep: #f7f9fc;
  --brass: var(--primary);
  --brass-deep: var(--primary-strong);
  --teal: var(--primary);
  --teal-deep: var(--navy);
  --error: var(--danger);
  --white: #fff;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  background-color: #f5f8fd;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)),
    var(--background-image);
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  overflow-x: hidden;
}


button,
input,
select {
  font: inherit;
}

a.btn {
  text-decoration: none;
}

a[hidden],
button[hidden],
div[hidden],
section[hidden],
span[hidden] {
  display: none !important;
}

.app {
  width: min(100%, 1540px);
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  position: relative;
}

/* -------------------------------------------------------------------------- */
/* CABECERA                                                                    */
/* -------------------------------------------------------------------------- */
.app-header {
  min-height: 132px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 16px;
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-width: 470px;
}

.brand-logo {
  width: 122px;
  height: 136px;
  flex: 0 0 auto;
  background-image: var(--logo-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.brand-copy {
  padding-top: 22px;
  min-width: 0;
}

.brand h1 {
  margin: 0;
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(38px, 3.3vw, 48px);
  line-height: .95;
  letter-spacing: .015em;
  text-transform: uppercase;
  font-weight: 800;
}

.brand-subtitle,
.eyebrow {
  display: block;
  margin-top: 12px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.auth-controls {
  padding-top: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.admin-badge {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.admin-user-label {
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px 0 44px;
  border: 1px solid #dae4f3;
  border-radius: 16px;
  color: var(--navy);
  background: rgba(244, 248, 254, .9);
  box-shadow: 0 4px 14px rgba(6, 48, 113, .04) inset;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
}

.admin-user-label::before {
  content: '';
  position: absolute;
  left: 18px;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  top: 10px;
}

.admin-user-label::after {
  content: '';
  position: absolute;
  left: 15px;
  bottom: 9px;
  width: 22px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 0;
}

.admin-user-label b,
.admin-user-label strong {
  color: var(--primary);
}

/* -------------------------------------------------------------------------- */
/* BOTONES                                                                     */
/* -------------------------------------------------------------------------- */
.btn {
  appearance: none;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 20px;
  border: 1.5px solid transparent;
  border-radius: 11px;
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(4, 49, 119, .025);
  transition: transform .14s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.btn svg,
.nav-link svg,
.section-heading svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(5, 66, 160, .09);
}

.btn:active {
  transform: translateY(0) scale(.985);
}

.btn:disabled {
  opacity: .52;
  cursor: not-allowed;
  transform: none;
}

.btn:focus-visible,
input:focus-visible,
select:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid rgba(7, 87, 230, .2);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}

.btn-outline {
  background: rgba(255, 255, 255, .84);
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline:hover:not(:disabled) {
  background: var(--primary-soft);
}

.btn-danger {
  background: rgba(255, 255, 255, .86);
  color: var(--danger);
  border-color: #f25a51;
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-bg);
}

.btn-brass {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-brass:hover:not(:disabled) {
  background: var(--primary-strong);
}

.btn-sm {
  min-height: 46px;
  padding: 9px 17px;
  font-size: 13px;
}

/* -------------------------------------------------------------------------- */
/* NAVEGACIÓN                                                                  */
/* -------------------------------------------------------------------------- */
.main-nav {
  width: min(var(--content-width), calc(100% - var(--content-indent)));
  margin: 0 0 0 var(--content-indent);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.nav-link {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 14px 26px 13px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  color: #536786;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: color .15s ease, background .15s ease;
}

.nav-link:hover {
  color: var(--primary);
  background: rgba(255, 255, 255, .46);
}

.nav-link.active {
  color: var(--primary);
  background: rgba(255, 255, 255, .96);
  border-color: var(--line-strong);
  font-weight: 700;
  box-shadow: 0 -5px 18px rgba(8, 57, 127, .035);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 4px;
  border-radius: 6px 6px 0 0;
  background: var(--primary);
}

/* -------------------------------------------------------------------------- */
/* PANEL PRINCIPAL                                                             */
/* -------------------------------------------------------------------------- */
.single-panel {
  width: min(var(--content-width), calc(100% - var(--content-indent)));
  margin-left: var(--content-indent);
  min-height: 310px;
  padding: 36px 50px 30px;
  border: 1px solid var(--line-strong);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(3px);
}

.panel-title {
  margin: 0 0 7px;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.025em;
}

#scanTitle {
  display: flex;
  align-items: center;
  gap: 15px;
}

.panel-sub {
  max-width: 850px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.section-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

/* -------------------------------------------------------------------------- */
/* FORMULARIOS                                                                 */
/* -------------------------------------------------------------------------- */
.registrar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr);
  gap: 54px;
  align-items: start;
}

.socio-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field label {
  color: #425576;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: none;
}

.field input,
.field select,
.search-input,
.modal input,
.modal select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cdd9e9;
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  color: var(--navy);
  padding: 11px 14px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.field input::placeholder,
.search-input::placeholder {
  color: #99a6ba;
}

.field input:focus,
.field select:focus,
.search-input:focus,
.modal input:focus,
.modal select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(7, 87, 230, .11);
  background: #fff;
}

.req {
  color: var(--danger);
}

.field-help {
  color: #7a8aa3;
  font-size: 11.5px;
  line-height: 1.45;
}

.error-text {
  min-height: 18px;
  color: var(--danger);
  font-size: 13px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid #d5e0ef;
  border-radius: 11px;
  background: rgba(249, 251, 255, .92);
  cursor: pointer;
}

.check-row input {
  margin-top: 3px;
  accent-color: var(--primary);
}

.check-row span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.check-row strong {
  color: var(--navy);
  font-size: 14px;
}

.check-row small {
  color: var(--muted);
  font-size: 12px;
}

/* -------------------------------------------------------------------------- */
/* QR DE REGISTRO                                                              */
/* -------------------------------------------------------------------------- */
.qr-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 24px;
  border: 1px solid #d4dfef;
  border-radius: 15px;
  background: rgba(249, 251, 255, .78);
  text-align: center;
}

.qr-box {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #ced9e9;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.qr-box canvas,
.qr-box img {
  width: 100% !important;
  height: 100% !important;
}

.placeholder-txt {
  color: var(--muted);
  font-size: 12px;
  padding: 16px;
}

.qr-id-text {
  font-family: var(--mono);
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
}

.qr-meta-text {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------- */
/* LISTADO DE SOCIOS                                                           */
/* -------------------------------------------------------------------------- */
.socios-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.search-input {
  flex: 1;
  min-width: 270px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eef3fa;
  color: #536783;
  font-size: 11.5px;
  font-weight: 700;
}

.badge-admin {
  background: var(--primary-soft);
  color: var(--primary);
}

.badge-first {
  background: #fff5df;
  color: #9a6812;
}

.list-message {
  min-height: 20px;
  margin: 0 0 8px;
  color: var(--primary);
  font-size: 13px;
}

.list-message.error {
  color: var(--danger);
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d7e0ec;
  border-radius: 13px;
  background: #fff;
}

.socios-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  color: #23395d;
  font-size: 12.7px;
}

.socios-table th {
  padding: 13px 14px;
  border-bottom: 1px solid #d7e0ec;
  background: #f5f8fc;
  color: #60728f;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
}

.socios-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #e5ebf3;
  vertical-align: middle;
  text-align: left;
}

.socios-table tbody tr:last-child td {
  border-bottom: 0;
}

.socios-table tr:hover td {
  background: #f8fbff;
}

.socios-table th:last-child,
.socios-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.cell-id,
.dni-cell {
  font-family: var(--mono);
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}

.cell-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.socios-table .btn {
  min-width: 62px;
  min-height: 33px;
  padding: 6px 9px;
  border-width: 1px;
  border-radius: 8px;
  font-size: 11px;
}

.table-select {
  min-width: 145px;
  border: 1px solid #cdd9e9;
  border-radius: 8px;
  background: #fff;
  padding: 8px 9px;
}

.loading,
.empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* -------------------------------------------------------------------------- */
/* ESCÁNER                                                                     */
/* -------------------------------------------------------------------------- */
.scan-grid {
  display: grid;
  grid-template-columns: minmax(420px, .95fr) minmax(470px, 1.1fr);
  gap: 58px;
  align-items: start;
}

.scan-frame {
  position: relative;
  width: 100%;
  max-width: 505px;
  aspect-ratio: 1.30 / 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #071b3f;
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 48%, rgba(22, 70, 128, .20), transparent 34%),
    linear-gradient(145deg, #061b3c, #02132c 62%, #041b42);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 9px 18px rgba(0, 24, 59, .18), inset 0 0 44px rgba(0, 0, 0, .18);
}

.scan-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.idle-msg {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: rgba(255, 255, 255, .93);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
  padding: 28px;
}

.camera-idle-icon {
  width: 54px;
  height: 54px;
  color: rgba(137, 174, 226, .30);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scan-corner {
  position: absolute;
  width: 43px;
  height: 43px;
  border: 4px solid #49a4ff;
  pointer-events: none;
  filter: drop-shadow(0 0 5px #0b74ff);
}

.scan-corner.tl {
  top: 18px;
  left: 18px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 11px 0 0;
}

.scan-corner.tr {
  top: 18px;
  right: 18px;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 11px 0 0;
}

.scan-corner.bl {
  bottom: 18px;
  left: 18px;
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 11px;
}

.scan-corner.br {
  right: 18px;
  bottom: 18px;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 11px;
}

.scan-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.scan-controls .btn-primary {
  min-width: 220px;
}

.upload-fallback {
  margin-top: 18px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.upload-fallback label {
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.result-panel {
  min-height: 422px;
  padding: 26px 28px;
  border: 1px solid #ced9e8;
  border-radius: 15px;
  background: rgba(255, 255, 255, .72);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(10, 53, 119, .025);
}

.result-empty {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}

.scan-result {
  width: 100%;
  color: var(--text);
}

.scan-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.scan-result-title {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--success);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.scan-result.denied .scan-result-title {
  color: var(--danger);
}

.status-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 3px solid currentColor;
  border-radius: 50%;
  font-size: 38px;
  font-weight: 800;
}

.scan-time {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.access-data-list {
  border-top: 1px solid #e0e6ef;
}

.access-data-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px 1.1fr 1.25fr;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e0e6ef;
  color: var(--navy);
}

.access-data-icon.round {
  border-radius: 50%;
}

.access-data-label {
  color: #213a63;
  font-size: 14px;
  font-weight: 500;
}

.access-data-value {
  color: #10285a;
  font-size: 14px;
  font-weight: 800;
}

.access-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 7px 13px;
  border-radius: 9px;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid #c2ead9;
  font-size: 12px;
  font-weight: 800;
}

.access-status::before {
  content: '✓';
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 12px;
}

.scan-result.denied .access-status {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #f5c9c4;
}

.scan-result.denied .access-status::before {
  content: '×';
  background: var(--danger);
}

.access-notice {
  margin-top: 18px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 14px;
  border: 1px solid #cfe0fa;
  border-radius: 10px;
  background: #edf4ff;
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 600;
}

.access-notice::before {
  content: '✓';
  width: 21px;
  height: 25px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 6px 6px 8px 8px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
}

.scan-result.denied .access-notice {
  border-color: #f3d0cc;
  background: #fff4f2;
  color: var(--danger);
}

.scan-result.denied .access-notice::before {
  content: '!';
  background: var(--danger);
}

/* Compatibilidad con resultados antiguos, por si hay HTML cacheado. */
.icon-large {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
}

.result-success {
  color: var(--success);
  text-align: center;
}

.result-error {
  color: var(--danger);
  text-align: center;
}

.result-success .name,
.result-error .name {
  color: var(--navy);
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 6px;
}

.result-success .meta,
.result-error .meta {
  color: var(--muted);
  font-size: 13px;
}

.person-data-grid {
  width: min(100%, 440px);
  margin: 14px auto 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  text-align: left;
}

.person-data-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
}

.person-data-row:last-child {
  border-bottom: 0;
}

.person-data-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.person-data-row strong {
  color: var(--navy);
}

/* -------------------------------------------------------------------------- */
/* JORNADAS                                                                    */
/* -------------------------------------------------------------------------- */
.jornadas-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.jornada-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 17px 20px;
  border: 1px solid #d4deec;
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.jornada-card:hover {
  border-color: #80adf4;
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.jornada-info h3 {
  margin: 0 0 5px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 800;
}

.jornada-info p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.jornadas-admin-list {
  margin-top: 14px;
  border: 1px solid #d9e1ed;
  border-radius: 12px;
  background: #fff;
}

.jornada-admin-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-bottom: 1px solid #e3e8f0;
  font-size: 13px;
}

.jornada-admin-item:last-child {
  border-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* MODALES Y AVISOS                                                            */
/* -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 19, 48, .58);
  backdrop-filter: blur(3px);
}

.modal-overlay.show {
  display: flex;
}

.modal {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 28px;
  border: 1px solid #d1dceb;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 20, 56, .28);
}

.modal h3 {
  margin: 0 0 7px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
}

.modal-sub {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.modal .field {
  margin-bottom: 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.modal-error {
  min-height: 18px;
  margin-top: 3px;
  color: var(--danger);
  font-size: 12.5px;
}

.action-confirm-overlay {
  z-index: 120;
}

.action-confirm-modal {
  max-width: 470px;
}

.action-confirm-modal .modal-sub {
  font-size: 14px;
  margin-top: 10px;
}

.action-confirm-modal .btn-danger {
  min-width: 130px;
}

.app-toast {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 100;
  max-width: min(420px, calc(100vw - 28px));
  padding: 13px 17px;
  border: 1px solid #d5dfec;
  border-left: 4px solid var(--primary);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(6, 32, 76, .18);
  color: var(--navy);
  font-size: 13px;
  font-weight: 650;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.app-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.app-toast-success {
  border-left-color: var(--success);
}

.app-toast-error {
  border-left-color: var(--danger);
}

.app-toast-warning {
  border-left-color: var(--warning);
}

.person-name {
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
}

.person-data {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px auto 10px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
}

.person-data span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.person-data strong {
  font-family: var(--mono);
}

/* -------------------------------------------------------------------------- */
/* PIE DE MARCA                                                                */
/* -------------------------------------------------------------------------- */
.brand-footer {
  width: min(var(--content-width), calc(100% - var(--content-indent)));
  margin: 34px 0 34px var(--content-indent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #142f64;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.brand-footer .bars {
  display: flex;
  gap: 10px;
  align-items: center;
}

.brand-footer strong {
  color: var(--primary);
  font-weight: 800;
}

.brand-footer .bar {
  width: 55px;
  height: 6px;
  background: var(--primary);
  box-sizing: border-box;
}

.brand-footer .bar.light {
  background: transparent;
  border: 2px solid #93b7f7;
}

.foot-note {
  width: min(var(--content-width), calc(100% - var(--content-indent)));
  margin: 14px 0 0 var(--content-indent);
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}

.offscreen {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 650px;
  height: 650px;
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE                                                                  */
/* -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
  :root {
    --content-indent: 105px;
    --content-width: 1120px;
  }

  .app-header {
    gap: 18px;
  }

  .brand {
    min-width: 420px;
    gap: 18px;
  }

  .brand-logo {
    width: 105px;
    height: 124px;
  }

  .brand h1 {
    font-size: 42px;
  }

  .brand-subtitle {
    font-size: 14px;
  }

  .admin-badge {
    gap: 8px;
  }

  .btn-sm {
    padding-left: 13px;
    padding-right: 13px;
  }

  .single-panel {
    padding-left: 38px;
    padding-right: 38px;
  }

  .scan-grid {
    grid-template-columns: minmax(370px, .95fr) minmax(420px, 1.05fr);
    gap: 38px;
  }
}

@media (max-width: 1120px) {
  body {
    padding: 22px 18px 36px;
    background-attachment: scroll, scroll;
  }

  body::before {
    display: none;
  }

  :root {
    --content-indent: 0px;
    --content-width: 100%;
  }

  .app-header {
    min-height: 0;
    align-items: center;
    flex-direction: column;
  }

  .brand {
    width: 100%;
    min-width: 0;
  }

  .auth-controls {
    width: 100%;
    padding-top: 0;
    justify-content: flex-start;
  }

  .admin-badge {
    justify-content: flex-start;
  }

  .main-nav,
  .single-panel,
  .brand-footer,
  .foot-note {
    width: 100%;
    margin-left: 0;
  }

  .scan-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
}

@media (max-width: 820px) {
  body {
    padding: 16px 10px 30px;
  }

  .brand-logo {
    width: 80px;
    height: 100px;
  }

  .brand-copy {
    padding-top: 15px;
  }

  .brand h1 {
    font-size: 34px;
  }

  .brand-subtitle {
    white-space: normal;
    font-size: 12px;
  }

  .admin-badge {
    width: 100%;
  }

  .admin-user-label {
    width: 100%;
  }

  .auth-controls>.btn {
    width: 100%;
  }

  .main-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 2px;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    min-width: max-content;
    min-height: 50px;
    padding: 12px 17px;
  }

  .single-panel {
    padding: 26px 20px;
    border-radius: 0 14px 14px 14px;
  }

  .registrar-grid,
  .scan-grid {
    grid-template-columns: 1fr;
  }

  .scan-grid {
    gap: 28px;
  }

  .scan-frame {
    max-width: 560px;
  }

  .result-panel {
    min-height: 360px;
  }

  .section-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-topline .btn {
    align-self: flex-start;
  }

  .brand-footer {
    margin-top: 24px;
    font-size: 14px;
    letter-spacing: .22em;
  }

  .brand-footer .bar {
    width: 35px;
  }
}

@media (max-width: 520px) {
  .brand {
    gap: 12px;
  }

  .brand-logo {
    width: 64px;
    height: 82px;
  }

  .brand h1 {
    font-size: 29px;
  }

  .brand-subtitle {
    margin-top: 6px;
    font-size: 10.5px;
  }

  .admin-badge .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 135px;
  }

  .single-panel {
    padding: 22px 15px;
  }

  .panel-title {
    font-size: 22px;
  }

  .scan-frame {
    border-radius: 13px;
  }

  .result-panel {
    padding: 20px 16px;
  }

  .scan-result-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .access-data-row {
    grid-template-columns: 28px 95px 1fr;
  }

  .access-data-label,
  .access-data-value {
    font-size: 12.5px;
  }

  .modal {
    padding: 22px 18px;
  }

  .modal-actions {
    flex-direction: column-reverse;
  }

  .modal-actions .btn {
    width: 100%;
  }

  .brand-footer {
    gap: 6px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------- */
/* RESULTADO DEL ESCÁNER EN POPUP                                             */
/* -------------------------------------------------------------------------- */
.scan-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 18, 45, .58);
  backdrop-filter: blur(4px);
}

.scan-result-overlay.show {
  display: flex;
}

.scan-result-popup {
  position: relative;
  width: min(660px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 30px;
  border: 1px solid #cdd9e9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(3, 27, 67, .28);
}

.scan-result-actions {
  display: flex;
  justify-content: space-evenly;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e0e6ef;
}

.scan-result-actions .scan-result-close {
  min-width: 140px;
}

.admin-password-help {
  display: block;
  margin-top: -4px;
  margin-bottom: 14px;
}

.jornadas-season-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
}

.jornadas-season-header h3 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
}

.season-field {
  min-width: 150px;
  margin: 0 !important;
}

.season-field label {
  font-size: 11px;
}

@media (max-width: 700px) {
  .scan-result-overlay {
    padding: 12px;
  }

  .scan-result-popup {
    padding: 24px 18px;
  }

  .scan-result-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .scan-result-actions .scan-result-close {
    width: 100%;
  }

  .access-data-row {
    grid-template-columns: 28px .9fr 1.2fr;
  }

  .jornadas-season-header {
    align-items: stretch;
    flex-direction: column;
  }
}

/* -------------------------------------------------------------------------- */
/* SOCIOS: acciones alineadas por columnas                                    */
/* -------------------------------------------------------------------------- */
.socios-table {
  min-width: 1320px;
}

.socios-table th.action-column,
.socios-table td.action-column {
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
  white-space: nowrap;
}

.socios-table th.action-qr,
.socios-table td.action-qr {
  width: 74px;
  min-width: 74px;
}

.socios-table th.action-card,
.socios-table td.action-card {
  width: 82px;
  min-width: 82px;
}

.socios-table th.action-edit,
.socios-table td.action-edit,
.socios-table th.action-delete,
.socios-table td.action-delete {
  width: 84px;
  min-width: 84px;
}

.socios-table th.action-permissions,
.socios-table td.action-permissions {
  width: 112px;
  min-width: 112px;
}

.socios-table td.action-column .btn {
  width: 100%;
  min-width: 0;
}

.action-placeholder {
  display: inline-flex;
  width: 100%;
  min-height: 33px;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 1px dashed #cbd7e7;
  border-radius: 8px;
  color: var(--muted);
  background: #f8fafd;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* SOCIOS: tabla completa, scroll interno y cabecera fija                      */
/* -------------------------------------------------------------------------- */
body[data-page="socios"] #sociosContainer {
  width: 100%;
  min-width: 0;
}

body[data-page="socios"] .table-wrap {
  width: 100%;
  max-height: clamp(360px, 56vh, 620px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  border: 1px solid #d7e0ec;
  border-radius: 13px;
  background: #fff;
  position: relative;
}

body[data-page="socios"] .socios-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

body[data-page="socios"] .socios-table th,
body[data-page="socios"] .socios-table td {
  background-clip: padding-box;
}

body[data-page="socios"] .socios-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f5f8fc;
  box-shadow: inset 0 -1px 0 #d7e0ec;
  white-space: nowrap;
}

body[data-page="socios"] .socios-table td {
  background: #fff;
}

body[data-page="socios"] .socios-table tbody tr:hover td {
  background: #f8fbff;
}

/* Separación visual continua en todos los campos, incluidas las acciones. */
body[data-page="socios"] .socios-table th:not(:last-child),
body[data-page="socios"] .socios-table td:not(:last-child) {
  border-right: 1px solid #edf1f6;
}

body[data-page="socios"] .socios-table th:last-child,
body[data-page="socios"] .socios-table td:last-child {
  text-align: center;
}

/* Mantiene legibles los campos largos y deja que el scroll pertenezca a la tabla. */
body[data-page="socios"] .socios-table th:nth-child(3),
body[data-page="socios"] .socios-table td:nth-child(3) {
  min-width: 190px;
}

body[data-page="socios"] .socios-table th:nth-child(6),
body[data-page="socios"] .socios-table td:nth-child(6) {
  min-width: 210px;
}

/* -------------------------------------------------------------------------- */
/* SOCIOS: popup de cambio de permisos                                         */
/* -------------------------------------------------------------------------- */
.permission-choice-modal .permission-choice-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.permission-choice-modal .permission-choice-actions .btn,
.permission-choice-modal .permission-choice-footer .btn {
  width: 100%;
}

.permission-choice-modal .permission-choice-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e1e8f1;
}



/* -------------------------------------------------------------------------- */
/* SOCIOS: escritorio sin scroll horizontal                                   */
/* -------------------------------------------------------------------------- */
@media (min-width: 1121px) {

  /* En Socios el panel ocupa todo el ancho; la navegación debe compartir
     exactamente el mismo origen y ancho para no quedar desplazada. */

  body[data-page="socios"] .main-nav,
  body[data-page="equipos"] .main-nav,
  body[data-page="miembros"] .main-nav {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body[data-page="socios"] .single-panel,
  body[data-page="equipos"] .single-panel,
  body[data-page="miembros"] .single-panel {
    width: 100%;
    margin-left: 0;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: var(--radius) !important;
  }

  body[data-page="calendario"] .single-panel {
    border-radius: var(--radius) !important;
  }

  body[data-page="socios"] .table-wrap {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  body[data-page="socios"] .socios-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  body[data-page="socios"] .socios-table th,
  body[data-page="socios"] .socios-table td {
    padding-left: 7px;
    padding-right: 7px;
    min-width: 0 !important;
  }

  body[data-page="socios"] .socios-table th {
    font-size: 9.5px;
    letter-spacing: .02em;
    white-space: normal;
    line-height: 1.15;
  }

  body[data-page="socios"] .socios-table td {
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-page="socios"] .socios-table th:nth-child(1),
  body[data-page="socios"] .socios-table td:nth-child(1) {
    width: 5.5%;
  }

  body[data-page="socios"] .socios-table th:nth-child(2),
  body[data-page="socios"] .socios-table td:nth-child(2) {
    width: 7%;
  }

  body[data-page="socios"] .socios-table th:nth-child(3),
  body[data-page="socios"] .socios-table td:nth-child(3) {
    width: 13.5%;
  }

  body[data-page="socios"] .socios-table th:nth-child(4),
  body[data-page="socios"] .socios-table td:nth-child(4) {
    width: 6.5%;
  }

  body[data-page="socios"] .socios-table th:nth-child(5),
  body[data-page="socios"] .socios-table td:nth-child(5) {
    width: 7%;
  }

  body[data-page="socios"] .socios-table th:nth-child(6),
  body[data-page="socios"] .socios-table td:nth-child(6) {
    width: 12.5%;
  }

  body[data-page="socios"] .socios-table th:nth-child(7),
  body[data-page="socios"] .socios-table td:nth-child(7) {
    width: 7%;
  }

  body[data-page="socios"] .socios-table th:nth-child(8),
  body[data-page="socios"] .socios-table td:nth-child(8) {
    width: 6%;
  }

  body[data-page="socios"] .socios-table th:nth-child(9),
  body[data-page="socios"] .socios-table td:nth-child(9) {
    width: 4.5%;
  }

  body[data-page="socios"] .socios-table th:nth-child(10),
  body[data-page="socios"] .socios-table td:nth-child(10) {
    width: 5.5%;
  }

  body[data-page="socios"] .socios-table th:nth-child(11),
  body[data-page="socios"] .socios-table td:nth-child(11) {
    width: 5.5%;
  }

  body[data-page="socios"] .socios-table th:nth-child(12),
  body[data-page="socios"] .socios-table td:nth-child(12) {
    width: 7%;
  }

  body[data-page="socios"] .socios-table th:nth-child(13),
  body[data-page="socios"] .socios-table td:nth-child(13) {
    width: 6%;
  }

  body[data-page="socios"] .socios-table th:nth-child(14),
  body[data-page="socios"] .socios-table td:nth-child(14) {
    width: 4.5%;
  }

  body[data-page="socios"] .socios-table td.action-column .btn,
  body[data-page="socios"] .action-placeholder {
    min-height: 30px;
    padding: 5px 4px;
    font-size: 9.5px;
  }

  body[data-page="socios"] .socios-table td:nth-child(8) .badge {
    max-width: 100%;
    padding-left: 6px;
    padding-right: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* -------------------------------------------------------------------------- */
/* EQUIPOS: categorías plegables, selector con scroll y plantilla desplazable */
/* -------------------------------------------------------------------------- */
body[data-page="equipos"] #listaEquipos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-page="equipos"] .categoria-group {
  overflow: hidden;
  border: 1px solid #d7e0ec;
  border-radius: 11px;
  background: #fff;
}

body[data-page="equipos"] .categoria-header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  color: var(--navy);
  background: #f5f8fc;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

body[data-page="equipos"] .categoria-header:hover,
body[data-page="equipos"] .categoria-header:focus-visible {
  background: var(--primary-soft);
}

body[data-page="equipos"] .categoria-header:focus-visible {
  outline: 3px solid rgba(7, 87, 230, .16);
  outline-offset: -3px;
}

body[data-page="equipos"] .categoria-toggle-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9d6e7;
  border-radius: 7px;
  background: #fff;
  color: var(--primary);
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

body[data-page="equipos"] .categoria-content {
  display: none;
  padding: 7px;
  border-top: 1px solid #e4eaf2;
}

body[data-page="equipos"] .categoria-content.show {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

body[data-page="equipos"] .equipo-row {
  width: 100%;
  min-height: 37px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #425576;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

body[data-page="equipos"] .equipo-row:hover,
body[data-page="equipos"] .equipo-row:focus-visible,
body[data-page="equipos"] .equipo-row.is-selected {
  background: var(--primary-soft);
  color: var(--primary);
}

body[data-page="equipos"] .equipo-row:focus-visible {
  outline: 2px solid rgba(7, 87, 230, .22);
  outline-offset: 1px;
}

body[data-page="equipos"] .categoria-empty {
  display: block;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

/* El select nativo conserva el valor; el desplegable visible permite limitar
   la altura y mostrar un scrollbar vertical. */
body[data-page="equipos"] .categoria-native-select {
  display: none !important;
}

body[data-page="equipos"] .categoria-select {
  position: relative;
  width: 100%;
}

body[data-page="equipos"] .categoria-select-button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 42px 11px 14px;
  border: 1px solid #cdd9e9;
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  position: relative;
}

body[data-page="equipos"] .categoria-select-button::after {
  content: '';
  width: 8px;
  height: 8px;
  position: absolute;
  right: 16px;
  top: 50%;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
}

body[data-page="equipos"] .categoria-select-button[aria-expanded="true"]::after {
  transform: translateY(-30%) rotate(225deg);
}

body[data-page="equipos"] .categoria-select-button:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(7, 87, 230, .11);
}

body[data-page="equipos"] .categoria-options {
  display: none;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  position: static;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid #cdd9e9;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

body[data-page="equipos"] .categoria-options.show {
  display: block;
}

/* En Crear nuevo equipo el popup no tiene scrollbar propio.
   El único scroll vertical está dentro del listado de categorías. */
body[data-page="equipos"] #modalEquipo .modal {
  max-height: none;
  overflow: visible;
}

body[data-page="equipos"] #modalEquipo .field:has(.categoria-select) {
  overflow: visible;
}

body[data-page="equipos"] .categoria-option {
  width: 100%;
  min-height: 38px;
  display: block;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: #fff;
  color: #425576;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

body[data-page="equipos"] .categoria-option:hover,
body[data-page="equipos"] .categoria-option:focus-visible {
  background: var(--primary-soft);
  color: var(--primary);
  outline: none;
}

/* Scroll vertical de la tabla de miembros; la cabecera queda fija. */
body[data-page="equipos"] .table-wrap-miembros {
  width: 100%;
  max-height: clamp(310px, 52vh, 560px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  position: relative;
}

body[data-page="equipos"] .table-wrap-miembros .socios-table {
  width: 100%;
  min-width: 750px;
  border-collapse: separate;
  border-spacing: 0;
}

body[data-page="equipos"] .table-wrap-miembros .socios-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f5f8fc;
  box-shadow: inset 0 -1px 0 #d7e0ec;
}

/* -------------------------------------------------------------------------- */
/* EQUIPOS: ficha completa de miembro (+ Info)                                */
/* -------------------------------------------------------------------------- */
body[data-page="equipos"] .equipo-actions-cell {
  text-align: right;
  white-space: nowrap;
}

body[data-page="equipos"] .equipo-actions-cell .btn {
  margin-left: 4px;
  min-width: 0;
}

body[data-page="equipos"] .modal-info-miembro {
  width: min(960px, calc(100vw - 36px));
  max-width: 960px;
  max-height: min(86vh, 820px);
  overflow-y: auto;
}

.info-miembro-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.info-miembro-header h3 {
  margin-bottom: 4px;
}

.info-miembro-contenido {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.info-miembro-top {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.info-person-photo {
  width: 150px;
  height: 180px;
  display: block;
  object-fit: contain;
  border: 1px solid #d7e0ec;
  border-radius: 12px;
  background: #f5f8fc;
}

.info-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
}

.info-miembro-summary,
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.info-miembro-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-section {
  padding-top: 14px;
  border-top: 1px solid #e3e9f1;
}

.info-section h4 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.info-field {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #e0e7f0;
  border-radius: 9px;
  background: #f9fbfe;
}

.info-field span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.info-field strong {
  display: block;
  overflow-wrap: anywhere;
  color: #263e64;
  font-size: 12.5px;
}

.info-teams {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.info-team-chip,
.member-team-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #d5e0ef;
  border-radius: 999px;
  background: #f5f8fc;
  color: #425576;
  font-size: 11px;
  font-weight: 600;
}

.info-doc-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.info-doc-photo {
  display: block;
  overflow: hidden;
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  background: #f5f8fc;
}

.info-doc-photo img {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: contain;
}

.muted-inline {
  color: var(--muted);
  font-size: 12px;
}

/* -------------------------------------------------------------------------- */
/* MIEMBROS: listado general                                                  */
/* -------------------------------------------------------------------------- */
body[data-page="miembros"] .miembros-main {
  min-height: 520px;
}

.miembros-toolbar-heading {
  align-items: flex-start;
}

.miembros-toolbar-heading .panel-sub {
  margin-bottom: 0;
}

.miembros-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.miembros-toolbar .search-input {
  min-width: 300px;
}

.miembros-table-wrap {
  width: 100%;
  max-height: clamp(390px, 58vh, 680px);
  overflow: auto;
  position: relative;
  scrollbar-gutter: stable;
}

.miembros-table {
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
}

.miembros-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f5f8fc;
  box-shadow: inset 0 -1px 0 #d7e0ec;
}

.member-avatar {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: cover;
  border: 1px solid #d7e0ec;
  border-radius: 50%;
  background: #f5f8fc;
}

.member-avatar-empty {
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-size: 12px;
}

.member-team-list {
  max-width: 300px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.member-actions {
  white-space: nowrap;
  text-align: right !important;
}

.member-actions .btn {
  margin-left: 4px;
}

/* -------------------------------------------------------------------------- */
/* MIEMBROS: ficha personal                                                   */
/* -------------------------------------------------------------------------- */
.ficha-header {
  align-items: flex-start;
  border-bottom: 1px solid #e0e7f0;
  padding-bottom: 18px;
}

.ficha-header .btn-outline {
  margin-bottom: 14px;
}

.ficha-header .panel-sub {
  margin-bottom: 0;
}

.ficha-personal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 26px;
  align-items: start;
}

.ficha-personal-form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ficha-section {
  padding: 18px;
  border: 1px solid #d9e2ef;
  border-radius: 13px;
  background: rgba(255, 255, 255, .82);
}

.ficha-section h3,
.ficha-fotos-panel h3 {
  margin: 0 0 15px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
}

.ficha-grid {
  display: grid;
  gap: 14px;
}

.ficha-grid-3,
.ficha-grid-address {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ficha-span-2 {
  grid-column: span 2;
}

.ficha-span-3 {
  grid-column: span 3;
}

.ficha-fotos-panel {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid #d9e2ef;
  border-radius: 13px;
  background: #f9fbfe;
}

.foto-upload-card {
  padding: 12px;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #fff;
}

.foto-upload-title {
  display: block;
  margin-bottom: 8px;
  color: #425576;
  font-size: 11.5px;
  font-weight: 800;
}


.foto-upload-card input[type="file"] {
  margin-top: 2px;
  width: 100%;
  color: var(--muted);
  font-size: 11px;
}

.miembro-equipos-selector {
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid #d7e0ec;
  border-radius: 9px;
  background: #fff;
  scrollbar-gutter: stable;
}

.member-team-category {
  border-bottom: 1px solid #e5ebf3;
}

.member-team-category:last-child {
  border-bottom: 0;
}

.member-team-category summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 5px 8px;
  color: var(--navy);
  background: #f5f8fc;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.member-team-category summary::-webkit-details-marker {
  display: none;
}

.member-team-category summary::after {
  content: '−';
  color: var(--primary);
  font-size: 14px;
}

.member-team-category:not([open]) summary::after {
  content: '+';
}

.member-team-category summary span {
  margin-left: auto;
  color: var(--muted);
  font-size: 9px;
}

.member-team-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
}

.member-team-check {
  min-height: 29px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid #e1e7f0;
  border-radius: 7px;
  background: #fff;
}

.member-team-check .form-check-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #425576;
  font-size: 10.5px;
  font-weight: 600;
}

.ficha-error {
  min-height: 20px;
  padding: 0 4px;
}

.ficha-actions-bottom {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 980px) {
  .ficha-personal-layout {
    grid-template-columns: 1fr;
  }

  .ficha-fotos-panel {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ficha-fotos-panel h3,
  .ficha-fotos-panel>.field-help {
    grid-column: 1 / -1;
  }

  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {

  .ficha-grid-3,
  .ficha-grid-address,
  .member-team-options,
  .info-miembro-summary,
  .info-grid,
  .info-doc-photos {
    grid-template-columns: 1fr;
  }

  .ficha-span-2,
  .ficha-span-3 {
    grid-column: auto;
  }

  .ficha-fotos-panel {
    display: flex;
  }

  .info-miembro-top {
    grid-template-columns: 1fr;
  }

  .info-person-photo {
    width: 130px;
    height: 156px;
  }
}


/* EQUIPOS: asegurar la misma marca/logo que en el resto de páginas */
body[data-page="equipos"] .brand-logo {
  display: block;
  background-image: var(--logo-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* MIEMBROS: máximo dos equipos visibles en la tabla; + indica que hay más. */
body[data-page="miembros"] .member-team-more {
  min-width: 28px;
  justify-content: center;
  cursor: help;
  font-weight: 800;
}


/* NAVEGACIÓN: el acceso a Equipos usa el escudo del club en lugar del SVG. */
.nav-link .nav-equipo-logo {
  width: 22px;
  height: 24px;
  flex: 0 0 22px;
  display: inline-block;
  background-image: var(--logo-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* MIEMBROS: los dos equipos y el + permanecen siempre en una sola línea. */
body[data-page="miembros"] .member-team-list {
  max-width: none;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

body[data-page="miembros"] .member-team-list .member-team-pill {
  flex: 0 0 auto;
}

body[data-page="miembros"] .member-team-more {
  flex: 0 0 28px;
}


/* MIEMBROS: máximo dos temporadas visibles; el + queda seguido y en la misma línea. */
body[data-page="miembros"] .member-season-list {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

body[data-page="miembros"] .member-season-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #d5e0ef;
  border-radius: 999px;
  background: #f5f8fc;
  color: #425576;
  font-size: 11px;
  font-weight: 600;
  flex: 0 0 auto;
}

body[data-page="miembros"] .member-season-more {
  min-width: 28px;
  justify-content: center;
  cursor: help;
  font-weight: 800;
  flex-basis: 28px;
}


/* -------------------------------------------------------------------------- */
/* EQUIPOS Y MIEMBROS: columnas y acciones alineadas como en Socios           */
/* -------------------------------------------------------------------------- */
body[data-page="equipos"] .table-wrap-miembros .socios-table,
body[data-page="miembros"] .miembros-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

body[data-page="equipos"] .table-wrap-miembros .socios-table th:not(:last-child),
body[data-page="equipos"] .table-wrap-miembros .socios-table td:not(:last-child),
body[data-page="miembros"] .miembros-table th:not(:last-child),
body[data-page="miembros"] .miembros-table td:not(:last-child) {
  border-right: 1px solid #edf1f6;
}

body[data-page="equipos"] .socios-table th.action-column,
body[data-page="equipos"] .socios-table td.action-column,
body[data-page="miembros"] .socios-table th.action-column,
body[data-page="miembros"] .socios-table td.action-column {
  width: 88px;
  min-width: 88px;
  padding-left: 6px;
  padding-right: 6px;
  text-align: center !important;
  white-space: nowrap;
}

body[data-page="equipos"] .socios-table th.action-info,
body[data-page="equipos"] .socios-table td.action-info,
body[data-page="miembros"] .socios-table th.action-info,
body[data-page="miembros"] .socios-table td.action-info {
  width: 92px;
  min-width: 92px;
}

body[data-page="equipos"] .socios-table td.action-column .btn,
body[data-page="miembros"] .socios-table td.action-column .btn {
  width: 100%;
  min-width: 0;
  margin: 0;
}

body[data-page="equipos"] #tablaMiembros th:nth-child(2),
body[data-page="equipos"] #tablaMiembros td:nth-child(2) {
  min-width: 190px;
}

body[data-page="equipos"] #tablaMiembros th:nth-child(5),
body[data-page="equipos"] #tablaMiembros td:nth-child(5) {
  min-width: 205px;
}

body[data-page="miembros"] .miembros-table th:nth-child(3),
body[data-page="miembros"] .miembros-table td:nth-child(3) {
  min-width: 190px;
}

body[data-page="miembros"] .miembros-table th:nth-child(5),
body[data-page="miembros"] .miembros-table td:nth-child(5) {
  min-width: 220px;
}

body[data-page="miembros"] .miembros-table th:nth-child(6),
body[data-page="miembros"] .miembros-table td:nth-child(6) {
  min-width: 180px;
}

body[data-page="miembros"] .miembros-table th:nth-child(8),
body[data-page="miembros"] .miembros-table td:nth-child(8) {
  min-width: 205px;
}

.info-miembro-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-page="miembros"] .modal-info-miembro {
  width: min(960px, calc(100vw - 36px));
  max-width: 960px;
  max-height: min(86vh, 820px);
  overflow-y: auto;
}


/* -------------------------------------------------------------------------- */
/* MIEMBROS v9: tabla adaptativa sin scroll horizontal                         */
/* -------------------------------------------------------------------------- */
body[data-page="miembros"] .miembros-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body[data-page="miembros"] .miembros-table,
body[data-page="miembros"] .miembros-table-wrap .socios-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

body[data-page="miembros"] .miembros-table th,
body[data-page="miembros"] .miembros-table td {
  min-width: 0 !important;
  max-width: none !important;
  padding-left: 7px;
  padding-right: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reparto porcentual: 100% exacto para que la tabla nunca fuerce anchura. */
body[data-page="miembros"] .miembros-table th:nth-child(1),
body[data-page="miembros"] .miembros-table td:nth-child(1) {
  width: 4.5%;
}

body[data-page="miembros"] .miembros-table th:nth-child(2),
body[data-page="miembros"] .miembros-table td:nth-child(2) {
  width: 7.5%;
}

body[data-page="miembros"] .miembros-table th:nth-child(3),
body[data-page="miembros"] .miembros-table td:nth-child(3) {
  width: 15.5%;
}

body[data-page="miembros"] .miembros-table th:nth-child(4),
body[data-page="miembros"] .miembros-table td:nth-child(4) {
  width: 9%;
}

body[data-page="miembros"] .miembros-table th:nth-child(5),
body[data-page="miembros"] .miembros-table td:nth-child(5) {
  width: 16%;
}

body[data-page="miembros"] .miembros-table th:nth-child(6),
body[data-page="miembros"] .miembros-table td:nth-child(6) {
  width: 10.5%;
}

body[data-page="miembros"] .miembros-table th:nth-child(7),
body[data-page="miembros"] .miembros-table td:nth-child(7) {
  width: 9.5%;
}

body[data-page="miembros"] .miembros-table th:nth-child(8),
body[data-page="miembros"] .miembros-table td:nth-child(8) {
  width: 12.5%;
}

body[data-page="miembros"] .miembros-table th:nth-child(9),
body[data-page="miembros"] .miembros-table td:nth-child(9),
body[data-page="miembros"] .miembros-table th:nth-child(10),
body[data-page="miembros"] .miembros-table td:nth-child(10),
body[data-page="miembros"] .miembros-table th:nth-child(11),
body[data-page="miembros"] .miembros-table td:nth-child(11) {
  width: 5%;
}

body[data-page="miembros"] .miembros-table td:nth-child(3) strong,
body[data-page="miembros"] .miembros-table td:nth-child(8) {
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-page="miembros"] .miembros-table .member-avatar {
  width: 34px;
  height: 34px;
  margin: 0 auto;
}

body[data-page="miembros"] .member-team-list,
body[data-page="miembros"] .member-season-list {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

body[data-page="miembros"] .member-team-list .member-team-pill:not(.member-team-more) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="miembros"] .member-season-list .member-season-pill:not(.member-season-more) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 6px;
  padding-right: 6px;
}

body[data-page="miembros"] .socios-table td.action-column .btn {
  width: 100%;
  min-width: 0 !important;
  padding: 6px 3px;
  font-size: 10px;
}

body[data-page="miembros"] .socios-table th.action-column,
body[data-page="miembros"] .socios-table td.action-column {
  min-width: 0 !important;
  padding-left: 3px;
  padding-right: 3px;
}

@media (max-width: 980px) {
  body[data-page="miembros"] .miembros-table {
    font-size: 11px;
  }

  body[data-page="miembros"] .miembros-table th,
  body[data-page="miembros"] .miembros-table td {
    padding-left: 4px;
    padding-right: 4px;
  }

  body[data-page="miembros"] .miembros-table .btn {
    font-size: 9px;
  }
}

/* -------------------------------------------------------------------------- */
/* LOGIN: detrás del modal solo se muestra el brand del header                 */
/* -------------------------------------------------------------------------- */
body.auth-header-only .main-nav,
body.auth-header-only .auth-controls,
body.auth-header-only main,
body.auth-header-only .brand-footer {
  display: none !important;
}

body.auth-header-only .app-header {
  justify-content: flex-start;
}

body.auth-header-only .brand {
  display: flex !important;
}

/* -------------------------------------------------------------------------- */
/* MIEMBROS v10: mismo comportamiento de tabla que Socios                     */
/* -------------------------------------------------------------------------- */
body[data-page="miembros"] .miembros-table-wrap {
  width: 100%;
  max-width: 100%;
  max-height: clamp(360px, 56vh, 620px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  border: 1px solid #d7e0ec;
  border-radius: 13px;
  background: #fff;
  position: relative;
}

body[data-page="miembros"] .miembros-table,
body[data-page="miembros"] .miembros-table-wrap .socios-table {
  width: max-content !important;
  min-width: 1180px !important;
  max-width: none;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

body[data-page="miembros"] .miembros-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f5f8fc;
  box-shadow: inset 0 -1px 0 #d7e0ec;
  white-space: nowrap;
}

body[data-page="miembros"] .miembros-table td {
  background: #fff;
}

body[data-page="miembros"] .miembros-table tbody tr:hover td {
  background: #f8fbff;
}

body[data-page="miembros"] .miembros-table th:not(:last-child),
body[data-page="miembros"] .miembros-table td:not(:last-child) {
  border-right: 1px solid #edf1f6;
}

/* En anchos intermedios/pequeños la tabla se desplaza horizontalmente,
   igual que Socios, en vez de comprimir las columnas y los botones. */
body[data-page="miembros"] .miembros-table th,
body[data-page="miembros"] .miembros-table td {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible;
  text-overflow: clip;
}

body[data-page="miembros"] .miembros-table th:nth-child(1),
body[data-page="miembros"] .miembros-table td:nth-child(1) {
  min-width: 64px !important;
}

body[data-page="miembros"] .miembros-table th:nth-child(2),
body[data-page="miembros"] .miembros-table td:nth-child(2) {
  min-width: 100px !important;
}

body[data-page="miembros"] .miembros-table th:nth-child(3),
body[data-page="miembros"] .miembros-table td:nth-child(3) {
  min-width: 210px !important;
}

body[data-page="miembros"] .miembros-table th:nth-child(4),
body[data-page="miembros"] .miembros-table td:nth-child(4) {
  min-width: 110px !important;
}

body[data-page="miembros"] .miembros-table th:nth-child(5),
body[data-page="miembros"] .miembros-table td:nth-child(5) {
  min-width: 250px !important;
}

body[data-page="miembros"] .miembros-table th:nth-child(6),
body[data-page="miembros"] .miembros-table td:nth-child(6) {
  min-width: 190px !important;
}

body[data-page="miembros"] .miembros-table th:nth-child(7),
body[data-page="miembros"] .miembros-table td:nth-child(7) {
  min-width: 120px !important;
}

body[data-page="miembros"] .miembros-table th:nth-child(8),
body[data-page="miembros"] .miembros-table td:nth-child(8) {
  min-width: 220px !important;
}

body[data-page="miembros"] .miembros-table th:nth-child(n+9),
body[data-page="miembros"] .miembros-table td:nth-child(n+9) {
  min-width: 88px !important;
}

body[data-page="miembros"] .miembros-table td:nth-child(3) strong,
body[data-page="miembros"] .miembros-table td:nth-child(8) {
  white-space: nowrap;
  overflow-wrap: normal;
}

body[data-page="miembros"] .member-team-list,
body[data-page="miembros"] .member-season-list {
  width: auto;
  max-width: none;
  overflow: visible;
}

body[data-page="miembros"] .socios-table td.action-column .btn {
  min-width: 76px !important;
  padding: 6px 8px;
  font-size: 10px;
}

@media (min-width: 1121px) {
  body[data-page="miembros"] .miembros-table-wrap {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  body[data-page="miembros"] .miembros-table,
  body[data-page="miembros"] .miembros-table-wrap .socios-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed;
  }

  body[data-page="miembros"] .miembros-table th,
  body[data-page="miembros"] .miembros-table td {
    min-width: 0 !important;
    padding-left: 7px;
    padding-right: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-page="miembros"] .miembros-table th {
    font-size: 9.5px;
    letter-spacing: .02em;
    white-space: normal;
    line-height: 1.15;
  }

  body[data-page="miembros"] .miembros-table td {
    font-size: 11.5px;
    white-space: nowrap;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(1),
  body[data-page="miembros"] .miembros-table td:nth-child(1) {
    width: 4.5% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(2),
  body[data-page="miembros"] .miembros-table td:nth-child(2) {
    width: 7.5% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(3),
  body[data-page="miembros"] .miembros-table td:nth-child(3) {
    width: 15.5% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(4),
  body[data-page="miembros"] .miembros-table td:nth-child(4) {
    width: 9% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(5),
  body[data-page="miembros"] .miembros-table td:nth-child(5) {
    width: 16% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(6),
  body[data-page="miembros"] .miembros-table td:nth-child(6) {
    width: 10.5% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(7),
  body[data-page="miembros"] .miembros-table td:nth-child(7) {
    width: 9.5% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(8),
  body[data-page="miembros"] .miembros-table td:nth-child(8) {
    width: 12.5% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(9),
  body[data-page="miembros"] .miembros-table td:nth-child(9),
  body[data-page="miembros"] .miembros-table th:nth-child(10),
  body[data-page="miembros"] .miembros-table td:nth-child(10),
  body[data-page="miembros"] .miembros-table th:nth-child(11),
  body[data-page="miembros"] .miembros-table td:nth-child(11) {
    width: 5% !important;
  }

  body[data-page="miembros"] .miembros-table td:nth-child(3) strong,
  body[data-page="miembros"] .miembros-table td:nth-child(8) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body[data-page="miembros"] .member-team-list,
  body[data-page="miembros"] .member-season-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  body[data-page="miembros"] .socios-table td.action-column .btn {
    width: 100%;
    min-width: 0 !important;
    padding: 6px 3px;
  }
}

/* -------------------------------------------------------------------------- */
/* MIEMBROS: Solicitudes con el mismo formato visual que + Info               */
/* -------------------------------------------------------------------------- */
body[data-page="miembros"] .modal-solicitudes-miembro {
  width: min(960px, calc(100vw - 36px));
  max-width: 960px;
  max-height: min(86vh, 820px);
  overflow-y: auto;
}

body[data-page="miembros"] .solicitud-miembro-contenido {
  gap: 18px;
}

body[data-page="miembros"] .solicitud-registro-section {
  padding-top: 0;
  border-top: 0;
}

body[data-page="miembros"] .solicitud-registro-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

body[data-page="miembros"] .solicitud-registro-heading h4 {
  margin: 0;
}

body[data-page="miembros"] .solicitud-registro-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

body[data-page="miembros"] .solicitud-registro-total {
  flex: 0 0 auto;
}

body[data-page="miembros"] .solicitud-registro-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e0e7f0;
  border-radius: 10px;
  background: #fff;
}

body[data-page="miembros"] .solicitud-registro-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  color: #263e64;
  font-size: 12px;
}

body[data-page="miembros"] .solicitud-registro-table th,
body[data-page="miembros"] .solicitud-registro-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  vertical-align: middle;
}

body[data-page="miembros"] .solicitud-registro-table th {
  background: #f5f8fc;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

body[data-page="miembros"] .solicitud-registro-table tr:last-child td {
  border-bottom: 0;
}

body[data-page="miembros"] .solicitud-registro-table tbody tr {
  transition: background-color .15s ease, box-shadow .15s ease;
}

body[data-page="miembros"] .solicitud-registro-table tbody tr:hover {
  background: #f8fbff;
}

body[data-page="miembros"] .solicitud-registro-num {
  width: 54px;
  color: var(--primary);
  font-weight: 800;
  text-align: center !important;
}

body[data-page="miembros"] .solicitud-selector-section {
  padding-top: 14px;
  border-top: 1px solid #e3e9f1;
}

body[data-page="miembros"] .solicitud-selector-field {
  margin: 0;
}

body[data-page="miembros"] .solicitud-selector-field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #e0e7f0;
  border-radius: 9px;
  background: #f9fbfe;
  color: #263e64;
  padding: 9px 11px;
  font-size: 12.5px;
  font-weight: 700;
}

body[data-page="miembros"] .solicitud-miembro-resumen {
  margin: 0;
}

body[data-page="miembros"] .solicitud-miembro-campos {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}

/* Los campos siguen siendo editables, pero usan exactamente la tarjeta visual
   de .info-field para que la solicitud se lea como la ficha de + Info. */
body[data-page="miembros"] .solicitud-edit-field label {
  display: block;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.3;
  font-weight: 700;
}

body[data-page="miembros"] .solicitud-edit-field input,
body[data-page="miembros"] .solicitud-edit-field select,
body[data-page="miembros"] .solicitud-edit-field textarea {
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid #d7e0ec;
  border-radius: 7px;
  background: #fff;
  color: #263e64;
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
}

body[data-page="miembros"] .solicitud-edit-field input:focus,
body[data-page="miembros"] .solicitud-edit-field select:focus,
body[data-page="miembros"] .solicitud-edit-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 51, 160, .08);
}

body[data-page="miembros"] .solicitud-review-actions {
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid #e3e9f1;
}

body[data-page="miembros"] .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 720px) {
  body[data-page="miembros"] .modal-solicitudes-miembro {
    width: min(100%, calc(100vw - 20px));
    padding: 20px;
  }
}


/* -------------------------------------------------------------------------- */
/* SOCIOS: alta de nuevo socio integrada en el listado                         */
/* -------------------------------------------------------------------------- */
body[data-page="socios"] .modal-nuevo-socio {
  width: min(980px, calc(100vw - 36px));
  max-width: 980px;
  max-height: min(95vh, 900px);
  overflow-y: auto;
}

body[data-page="socios"] .modal-nuevo-socio .nuevo-socio-header {
  margin-bottom: 20px;
}

body[data-page="socios"] .modal-nuevo-socio .modal-sub {
  margin-bottom: 0;
}

body[data-page="socios"] .modal-nuevo-socio .nuevo-socio-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 28px;
}

body[data-page="socios"] .modal-nuevo-socio .socio-form .field {
  margin-bottom: 0;
}

body[data-page="socios"] .modal-nuevo-socio .qr-preview-wrap {
  position: sticky;
  top: 0;
}

@media (max-width: 820px) {
  body[data-page="socios"] .modal-nuevo-socio .nuevo-socio-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="socios"] .modal-nuevo-socio .qr-preview-wrap {
    position: static;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}


/* -------------------------------------------------------------------------- */
/* SISTEMA DE MIEMBROS V2: credenciales, validación y cuotas                  */
/* -------------------------------------------------------------------------- */

body[data-page="miembros"] .solicitud-rejection-field {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid #e3e9f1;
}

body[data-page="miembros"] .solicitud-rejection-field textarea,
body[data-page="miembros"] .cuotas-rejection-field textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid #d7e0ec;
  border-radius: 9px;
  background: #fff;
  color: #263e64;
  font: inherit;
  font-size: 12.5px;
}

body[data-page="miembros"] .solicitud-rejection-field textarea:focus,
body[data-page="miembros"] .cuotas-rejection-field textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 51, 160, .08);
}

body[data-page="miembros"] .modal-cuotas-miembro {
  width: min(1180px, calc(100vw - 36px));
  max-width: 1180px;
  height: min(88vh, 860px);
  max-height: min(88vh, 860px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body[data-page="miembros"] .cuotas-admin-wrap {
  flex: 1 1 auto;
  min-height: 180px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body[data-page="miembros"] .cuotas-admin-table {
  min-width: 960px;
}

body[data-page="miembros"] .cuotas-admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-solid);
}

body[data-page="miembros"] .cuotas-admin-table .btn {
  min-width: 72px;
}

body[data-page="miembros"] .cuotas-rejection-field {
  margin-top: 16px;
}

/* La columna Credenciales se añade sin romper el comportamiento tipo Socios. */
body[data-page="miembros"] .miembros-table th:nth-child(11),
body[data-page="miembros"] .miembros-table td:nth-child(11) {
  min-width: 118px !important;
}

@media (min-width: 1121px) {

  body[data-page="miembros"] .miembros-table th:nth-child(1),
  body[data-page="miembros"] .miembros-table td:nth-child(1) {
    width: 4% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(2),
  body[data-page="miembros"] .miembros-table td:nth-child(2) {
    width: 7% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(3),
  body[data-page="miembros"] .miembros-table td:nth-child(3) {
    width: 14% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(4),
  body[data-page="miembros"] .miembros-table td:nth-child(4) {
    width: 8% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(5),
  body[data-page="miembros"] .miembros-table td:nth-child(5) {
    width: 14% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(6),
  body[data-page="miembros"] .miembros-table td:nth-child(6) {
    width: 9% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(7),
  body[data-page="miembros"] .miembros-table td:nth-child(7) {
    width: 8% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(8),
  body[data-page="miembros"] .miembros-table td:nth-child(8) {
    width: 13% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(9),
  body[data-page="miembros"] .miembros-table td:nth-child(9) {
    width: 5% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(10),
  body[data-page="miembros"] .miembros-table td:nth-child(10) {
    width: 5% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(11),
  body[data-page="miembros"] .miembros-table td:nth-child(11) {
    width: 8% !important;
    min-width: 0 !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(12),
  body[data-page="miembros"] .miembros-table td:nth-child(12) {
    width: 5% !important;
  }
}

/* Área privada del miembro: misma estructura visual que el resto de la aplicación */
body[data-page="area-miembro"] .member-area-app {
  width: min(100%, 1540px);
}

body[data-page="area-miembro"] .member-area-main {
  padding-bottom: 0;
}

body[data-page="area-miembro"] .member-area-tabs {
  width: min(var(--content-width), calc(100% - var(--content-indent)));
  margin: 0 0 0 var(--content-indent);
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="area-miembro"] .member-area-tab {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 14px 26px 13px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: transparent;
  color: #536786;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  box-shadow: none;
  transition: color .15s ease, background .15s ease;
}

body[data-page="area-miembro"] .member-area-tab:hover:not(:disabled) {
  color: var(--primary);
  background: rgba(255, 255, 255, .46);
}

body[data-page="area-miembro"] .member-area-tab.active {
  color: var(--primary);
  background: rgba(255, 255, 255, .96);
  border-color: var(--line-strong);
  font-weight: 700;
  box-shadow: 0 -5px 18px rgba(8, 57, 127, .035);
}

body[data-page="area-miembro"] .member-area-tab.active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 4px;
  border-radius: 6px 6px 0 0;
  background: var(--primary);
}

body[data-page="area-miembro"] .member-area-tab:disabled,
body[data-page="area-miembro"] .member-area-tab.disabled {
  opacity: .45;
  cursor: not-allowed;
}

body[data-page="area-miembro"] .member-area-panel {
  min-height: 420px;
}

body[data-page="area-miembro"] .member-data-form,
body[data-page="area-miembro"] .member-quota-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body[data-page="area-miembro"] .member-current-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

body[data-page="area-miembro"] .member-status-banner {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #d8e4f4;
  border-radius: 10px;
  background: #f6f9fe;
  color: #334a70;
  font-size: 13px;
  line-height: 1.5;
}

body[data-page="area-miembro"] .member-status-banner.pending {
  border-color: #ead6a3;
  background: #fff9ea;
  color: #7a5b14;
}

body[data-page="area-miembro"] .member-blocking-overlay,
body[data-page="area-miembro"] .member-quota-rejection-overlay {
  z-index: 10050;
  background: rgba(7, 24, 55, .72);
  backdrop-filter: blur(5px);
}

body[data-page="area-miembro"] .member-blocking-overlay.show,
body[data-page="area-miembro"] .member-quota-rejection-overlay.show {
  display: flex !important;
}

body[data-page="area-miembro"] .member-blocking-modal,
body[data-page="area-miembro"] .member-quota-rejected-modal {
  width: min(560px, calc(100vw - 32px));
  max-width: 560px;
  text-align: left;
  box-shadow: 0 28px 90px rgba(0, 25, 75, .38);
}

body[data-page="area-miembro"] .member-blocking-modal h3,
body[data-page="area-miembro"] .member-quota-rejected-modal h3 {
  margin-bottom: 8px;
}

body[data-page="area-miembro"] .member-rejection-reason {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #f0c7c3;
  border-radius: 9px;
  background: #fff5f4;
  color: #7e302a;
}

body[data-page="area-miembro"] .member-rejection-reason strong,
body[data-page="area-miembro"] .member-rejection-reason span {
  display: block;
}

body[data-page="area-miembro"] .member-rejection-reason span {
  margin-top: 5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body[data-page="area-miembro"] .member-quota-history {
  margin-top: 22px;
}

body[data-page="area-miembro"] .member-quota-table-wrap {
  width: 100%;
  overflow-x: auto;
}

body[data-page="area-miembro"] .member-quota-table {
  min-width: 880px;
}

body[data-page="area-miembro"] .member-quota-ok {
  background: var(--success-bg);
  color: var(--success);
}

body[data-page="area-miembro"] .member-quota-pending {
  background: #fff6dc;
  color: #8a6315;
}

body[data-page="area-miembro"] .member-data-form input:disabled,
body[data-page="area-miembro"] .member-data-form select:disabled,
body[data-page="area-miembro"] .member-data-form textarea:disabled {
  background: #f1f4f8;
  color: #687892;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  body[data-page="area-miembro"] .member-area-header {
    flex-direction: column;
  }

  body[data-page="area-miembro"] .member-area-tabs {
    width: calc(100% - 28px);
    margin-left: 14px;
    overflow-x: auto;
  }

  body[data-page="area-miembro"] .member-area-tab {
    flex: 1 0 auto;
    min-width: 145px;
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* -------------------------------------------------------------------------- */
/* + INFO DE MIEMBRO: historial de cuotas validadas por año                  */
/* -------------------------------------------------------------------------- */
.info-quota-years {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-quota-year {
  padding: 12px;
  border: 1px solid #e0e7f0;
  border-radius: 11px;
  background: #f9fbfe;
}

.info-quota-year h5 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
}

.info-quota-year-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.info-quota-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid #dbe5f1;
  border-radius: 10px;
  background: #fff;
}

.info-quota-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.info-quota-card-top>strong {
  color: #263e64;
  font-size: 12.5px;
}

.info-quota-amount {
  margin-bottom: 4px;
  color: var(--navy);
  font-size: 18px;
  font-weight: 800;
}

.info-quota-meta {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 720px) {
  .info-quota-year-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------- */
/* + INFO: selector anual de cuotas y descargas de documentación              */
/* -------------------------------------------------------------------------- */
.info-quota-filter {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.info-quota-filter label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.info-quota-year-select {
  min-width: 150px;
  height: 38px;
  padding: 7px 34px 7px 10px;
  border: 1px solid #d5dfef;
  border-radius: 9px;
  background: #fff;
  color: #263e64;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
}

.info-quota-year[hidden] {
  display: none !important;
}

.info-quota-year-panels,
.info-quota-year {
  min-width: 0;
}

.info-quota-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.info-person-photo-block {
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-person-photo-link {
  display: block;
  border-radius: 12px;
  text-decoration: none;
}

.info-photo-download {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.info-doc-photo-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  background: #fff;
}

.info-doc-photo-card .info-doc-photo {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #e0e7f0;
}

.info-doc-photo-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
}

.info-doc-photo-actions strong {
  min-width: 0;
  color: #263e64;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {

  .info-quota-filter,
  .info-quota-year-select {
    width: 100%;
  }

  .info-doc-photo-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* -------------------------------------------------------------------------- */
/* AJUSTES 2026-08-26: contraseña visible, notificaciones y acciones compactas */
/* -------------------------------------------------------------------------- */
.password-input-wrap {
  position: relative;
  width: 100%;
}

.password-input-wrap>input {
  width: 100%;
  padding-right: 48px !important;
}

.password-visibility-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible {
  background: var(--primary-soft);
  color: var(--primary);
  outline: none;
}

.password-visibility-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-visibility-toggle .eye-slash {
  display: none;
}

.password-visibility-toggle.is-visible .eye-slash {
  display: block;
}

.main-nav .nav-link {
  position: relative;
}

.member-nav-alert-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 1px rgba(226, 55, 45, .18);
  pointer-events: none;
}

.request-count-badge.has-pending {
  color: var(--danger) !important;
  border-color: rgba(226, 55, 45, .28) !important;
  background: var(--danger-bg) !important;
}

body[data-page="socios"] .socios-actions-compact-table {
  min-width: 1000px;
}

body[data-page="socios"] .socios-actions-compact-table .action-more {
  width: 72px;
  min-width: 72px;
  text-align: center;
  overflow: visible;
}

.socio-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-page="socios"] .socios-table .socio-actions-toggle {
  width: 44px;
  min-width: 44px;
  height: 33px;
  min-height: 33px;
  padding: 0 8px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
}

.socio-actions-menu {
  position: fixed;
  z-index: 10000;
  width: max-content;
  min-width: 205px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid #cfdbea;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(12, 42, 92, .22);
}

.socio-action-menu-item {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #334b70;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.socio-action-menu-item:hover,
.socio-action-menu-item:focus-visible {
  background: var(--primary-soft);
  color: var(--primary);
  outline: none;
}

.socio-action-menu-item.socio-action-menu-danger {
  color: var(--danger);
}

.socio-action-menu-item.socio-action-menu-danger:hover,
.socio-action-menu-item.socio-action-menu-danger:focus-visible {
  background: var(--danger-bg);
  color: var(--danger);
}

@media (min-width: 1121px) {
  body[data-page="socios"] .socios-actions-compact-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }

  body[data-page="socios"] .socios-actions-compact-table th:nth-child(1),
  body[data-page="socios"] .socios-actions-compact-table td:nth-child(1) {
    width: 7% !important;
  }

  body[data-page="socios"] .socios-actions-compact-table th:nth-child(2),
  body[data-page="socios"] .socios-actions-compact-table td:nth-child(2) {
    width: 8% !important;
  }

  body[data-page="socios"] .socios-actions-compact-table th:nth-child(3),
  body[data-page="socios"] .socios-actions-compact-table td:nth-child(3) {
    width: 16% !important;
  }

  body[data-page="socios"] .socios-actions-compact-table th:nth-child(4),
  body[data-page="socios"] .socios-actions-compact-table td:nth-child(4) {
    width: 9% !important;
  }

  body[data-page="socios"] .socios-actions-compact-table th:nth-child(5),
  body[data-page="socios"] .socios-actions-compact-table td:nth-child(5) {
    width: 10% !important;
  }

  body[data-page="socios"] .socios-actions-compact-table th:nth-child(6),
  body[data-page="socios"] .socios-actions-compact-table td:nth-child(6) {
    width: 17% !important;
  }

  body[data-page="socios"] .socios-actions-compact-table th:nth-child(7),
  body[data-page="socios"] .socios-actions-compact-table td:nth-child(7) {
    width: 9% !important;
  }

  body[data-page="socios"] .socios-actions-compact-table th:nth-child(8),
  body[data-page="socios"] .socios-actions-compact-table td:nth-child(8) {
    width: 9% !important;
  }

  body[data-page="socios"] .socios-actions-compact-table th:nth-child(9),
  body[data-page="socios"] .socios-actions-compact-table td:nth-child(9) {
    width: 5% !important;
  }

  body[data-page="socios"] .socios-actions-compact-table th:nth-child(10),
  body[data-page="socios"] .socios-actions-compact-table td:nth-child(10) {
    width: 6% !important;
  }

  body[data-page="socios"] .socios-actions-compact-table th:nth-child(11),
  body[data-page="socios"] .socios-actions-compact-table td:nth-child(11) {
    width: 5% !important;
  }
}

.info-quota-pending {
  background: #fff6dc;
  color: #8a6315;
}

.info-quota-card.is-pending {
  border-color: #ead9a0;
  background: #fffdf6;
}

body[data-page="equipos"] .table-wrap-miembros .socios-table {
  min-width: 680px;
}


/* -------------------------------------------------------------------------- */
/* AJUSTES 2026-08-27: checkboxes discretos, menús compactos y tablas          */
/* -------------------------------------------------------------------------- */

/* Checkboxes compactos y discretos en toda la aplicación. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  flex: 0 0 14px;
  display: inline-grid;
  place-content: center;
  margin: 0;
  border: 1px solid #b9c7da;
  border-radius: 3px;
  background: #fff;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

input[type="checkbox"]::before {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .1s ease;
}

input[type="checkbox"]:checked {
  border-color: var(--primary);
  background: var(--primary);
}

input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 51, 160, .12);
}

input[type="checkbox"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.member-team-check {
  min-height: 26px;
  gap: 5px;
  padding: 3px 5px;
}

.member-consent-check {
  gap: 8px !important;
  padding: 8px 10px !important;
}

/* Los contadores son notificaciones: con valor cero no ocupan espacio. */
.request-count-badge[hidden] {
  display: none !important;
}

/* Menú de tres puntos: mismo diseño en Socios y Miembros. */
body[data-page="miembros"] .miembros-actions-compact-table .action-more,
body[data-page="socios"] .socios-actions-compact-table .action-more {
  width: 68px;
  min-width: 68px;
  text-align: center;
  overflow: visible;
}

body[data-page="miembros"] .miembros-table .socio-actions-toggle,
body[data-page="socios"] .socios-table .socio-actions-toggle {
  width: 42px;
  min-width: 42px;
  height: 32px;
  min-height: 32px;
  padding: 0 7px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.socio-actions-menu {
  position: fixed !important;
  z-index: 10000;
}

/* Miembros: +Info visible y el resto de acciones agrupadas en ⋮. */
body[data-page="miembros"] .miembros-table,
body[data-page="miembros"] .miembros-table-wrap .socios-table {
  min-width: 1080px !important;
}

@media (min-width: 1121px) {

  body[data-page="miembros"] .miembros-table,
  body[data-page="miembros"] .miembros-table-wrap .socios-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(1),
  body[data-page="miembros"] .miembros-table td:nth-child(1) {
    width: 5% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(2),
  body[data-page="miembros"] .miembros-table td:nth-child(2) {
    width: 9% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(3),
  body[data-page="miembros"] .miembros-table td:nth-child(3) {
    width: 17% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(4),
  body[data-page="miembros"] .miembros-table td:nth-child(4) {
    width: 9% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(5),
  body[data-page="miembros"] .miembros-table td:nth-child(5) {
    width: 16% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(6),
  body[data-page="miembros"] .miembros-table td:nth-child(6) {
    width: 10% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(7),
  body[data-page="miembros"] .miembros-table td:nth-child(7) {
    width: 8% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(8),
  body[data-page="miembros"] .miembros-table td:nth-child(8) {
    width: 15% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(9),
  body[data-page="miembros"] .miembros-table td:nth-child(9) {
    width: 7% !important;
  }

  body[data-page="miembros"] .miembros-table th:nth-child(10),
  body[data-page="miembros"] .miembros-table td:nth-child(10) {
    width: 6% !important;
  }
}

/* Equipos: la plantilla usa todo el ancho del panel disponible. */
body[data-page="equipos"] .table-wrap-miembros {
  width: 100%;
  max-width: 100%;
}

body[data-page="equipos"] .table-wrap-miembros #tablaMiembros {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed;
}

body[data-page="equipos"] #tablaMiembros th,
body[data-page="equipos"] #tablaMiembros td {
  min-width: 0 !important;
  padding-left: 8px;
  padding-right: 8px;
  overflow-wrap: anywhere;
}

body[data-page="equipos"] #tablaMiembros th:nth-child(1),
body[data-page="equipos"] #tablaMiembros td:nth-child(1) {
  width: 13%;
}

body[data-page="equipos"] #tablaMiembros th:nth-child(2),
body[data-page="equipos"] #tablaMiembros td:nth-child(2) {
  width: 29%;
}

body[data-page="equipos"] #tablaMiembros th:nth-child(3),
body[data-page="equipos"] #tablaMiembros td:nth-child(3) {
  width: 15%;
}

body[data-page="equipos"] #tablaMiembros th:nth-child(4),
body[data-page="equipos"] #tablaMiembros td:nth-child(4) {
  width: 15%;
}

body[data-page="equipos"] #tablaMiembros th:nth-child(5),
body[data-page="equipos"] #tablaMiembros td:nth-child(5) {
  width: 20%;
}

body[data-page="equipos"] #tablaMiembros th:nth-child(6),
body[data-page="equipos"] #tablaMiembros td:nth-child(6) {
  width: 8%;
}

@media (max-width: 760px) {
  body[data-page="equipos"] .table-wrap-miembros #tablaMiembros {
    width: 620px !important;
    min-width: 620px !important;
    max-width: none !important;
    table-layout: auto;
  }
}


/* Términos: apartados numerados integrados, inspirados en la ficha documental. */
body[data-page="area-miembro"] .member-consent-terms {
  white-space: normal !important;
  background: #f8fafd !important;
}

.member-terms-document-title {
  color: var(--navy);
  font-family: var(--display);
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.member-terms-document-club {
  margin: 4px 0 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.member-terms-section {
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid #cbd8e9;
  border-radius: 11px;
  background: #fff;
}

.member-terms-section h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  background: #f0f4fa;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
}

.member-terms-section h4 span {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
}

.member-terms-section-body {
  padding: 10px 12px 11px;
}

.member-terms-section-body p {
  margin: 0 0 8px;
  color: #334b70;
  font-size: 12.5px;
  line-height: 1.55;
}

.member-terms-section-body p:last-child {
  margin-bottom: 0;
}

.member-terms-section-mail {
  border-color: #b9cbe3;
}

.member-terms-section-mail h4 {
  background: var(--navy);
  color: #fff;
}

.member-terms-section-mail h4 span {
  background: #fff;
  color: var(--navy);
}

.member-terms-declaration h4 {
  background: #eef3fb;
}

@media (max-width: 700px) {
  .member-terms-section h4 {
    align-items: flex-start;
    padding: 8px 9px;
    font-size: 11.5px;
  }

  .member-terms-section-body {
    padding: 9px 10px 10px;
  }

  .member-terms-section-body p {
    font-size: 12px;
  }
}

/* -------------------------------------------------------------------------- */
/* PERFILES COMPARTIDOS: selector de rol tras iniciar sesión                   */
/* -------------------------------------------------------------------------- */
.login-role-selection {
  width: 100%;
}

.login-role-options {
  display: grid;
  gap: 10px;
  margin: 8px 0 14px;
}

.login-role-card {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease, transform .12s ease;
}

.login-role-card:hover,
.login-role-card:focus-visible {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 8px 22px rgba(0, 51, 160, .10);
  outline: none;
  transform: translateY(-1px);
}

.login-role-card:disabled {
  opacity: .58;
  cursor: wait;
  transform: none;
}

.login-role-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
}

.login-role-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-role-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login-role-copy strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
}

.login-role-copy small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.login-role-arrow {
  color: var(--primary);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  text-align: right;
}

.login-role-card.is-loading .login-role-arrow {
  animation: loginRolePulse .7s ease-in-out infinite alternate;
}

.login-role-actions {
  justify-content: center;
  margin-top: 4px;
}

@keyframes loginRolePulse {
  from {
    opacity: .35;
    transform: translateX(-2px);
  }

  to {
    opacity: 1;
    transform: translateX(2px);
  }
}

@media (max-width: 520px) {
  .login-role-card {
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    gap: 10px;
    padding: 12px;
  }

  .login-role-icon {
    width: 38px;
    height: 38px;
  }
}


/* -------------------------------------------------------------------------- */
/* AJUSTES 2026-08-27: selector de perfil, padres y panel anual de cuotas      */
/* -------------------------------------------------------------------------- */
#loginOverlay.role-selection-mode {
  padding: 5vh 5vw;
}

#loginOverlay.role-selection-mode .modal {
  width: 90vw;
  height: 90vh;
  max-width: none;
  max-height: 90vh;
  padding: clamp(24px, 4vw, 52px);
  overflow: auto;
  border-radius: 22px;
}

#loginOverlay.role-selection-mode #loginModalContent {
  min-height: 100%;
}

.login-role-selection {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1120px;
  margin: 0 auto;
}

.login-role-selection>h3 {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: -.02em;
}

.login-role-selection>.modal-sub {
  max-width: 760px;
  font-size: 14px;
}

.login-role-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 22px 0;
}

.login-role-card {
  grid-template-columns: 46px minmax(0, 1fr) 16px;
  min-height: 88px;
  padding: 14px 16px;
  border: 1px solid #d9e3f0;
  border-radius: 15px;
  box-shadow: 0 5px 18px rgba(10, 53, 119, .045);
}

.login-role-card:hover,
.login-role-card:focus-visible {
  transform: none;
  border-color: #aac2e8;
  background: #f8fbff;
  box-shadow: 0 10px 28px rgba(10, 53, 119, .08);
}

.login-role-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.login-role-copy strong {
  font-size: 15px;
}

.login-role-copy small {
  font-size: 12px;
  line-height: 1.45;
}

.login-role-arrow {
  font-size: 24px;
  opacity: .7;
}

.login-role-actions .btn {
  min-width: 0;
  padding-inline: 14px;
}

.member-team-primary,
.member-season-primary {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-team-more,
.member-season-more {
  width: 27px;
  min-width: 27px;
  justify-content: center;
  padding-inline: 0 !important;
  cursor: help;
}

.cuotas-dashboard-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}

.cuotas-dashboard-toolbar .field {
  margin: 0;
  min-width: 180px;
}

.cuotas-dashboard-toolbar .cuotas-search-field {
  flex: 1 1 320px;
  min-width: min(320px, 100%);
}

.cuotas-dashboard-toolbar .cuotas-search-field .search-input {
  width: 100%;
}

.modal-cuotas-miembro .info-miembro-header,
.modal-cuotas-miembro .cuotas-dashboard-toolbar,
.modal-cuotas-miembro .cuotas-summary-grid,
.modal-cuotas-miembro .cuotas-rejection-field,
.modal-cuotas-miembro .modal-error {
  flex: 0 0 auto;
}

.cuotas-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.cuotas-summary-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.cuotas-summary-card span {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.cuotas-summary-card strong {
  display: block;
  margin-top: 3px;
  color: var(--navy);
  font-size: 24px;
}

.cuotas-summary-card.is-paid {
  background: #f4fbf7;
  border-color: #cce8d8;
}

.cuotas-summary-card.is-pending {
  background: #fffaf0;
  border-color: #ead9a0;
}

.cuotas-summary-card.is-missing {
  background: #f7f9fc;
  border-color: #dbe3ee;
}

.quota-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.quota-status-chip.is-paid {
  color: #08734a;
  background: #e8f7f0;
}

.quota-status-chip.is-pending {
  color: #8a6315;
  background: #fff3cf;
}

.quota-status-chip.is-missing {
  color: #60708f;
  background: #eef2f7;
}

.cuota-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  #loginOverlay.role-selection-mode {
    padding: 3vh 3vw;
  }

  #loginOverlay.role-selection-mode .modal {
    width: 94vw;
    height: 94vh;
    max-height: 94vh;
    padding: 22px 18px;
  }

  .login-role-options {
    grid-template-columns: 1fr;
  }

  .login-role-card {
    min-height: 94px;
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    padding: 15px;
  }

  .login-role-icon {
    width: 42px;
    height: 42px;
  }

  .cuotas-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .cuotas-summary-card {
    padding: 9px 8px;
  }

  .cuotas-summary-card strong {
    font-size: 18px;
  }

  body[data-page="miembros"] .modal-cuotas-miembro {
    height: 94vh;
    max-height: 94vh;
  }

  body[data-page="miembros"] .cuotas-admin-wrap {
    min-height: 150px;
  }
}

/* -------------------------------------------------------------------------- */
/* MIEMBROS: cuotas agrupadas por miembro + revisión individual               */
/* -------------------------------------------------------------------------- */
body[data-page="miembros"] .cuotas-summary-card {
  appearance: none;
  width: 100%;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body[data-page="miembros"] .cuotas-summary-card:hover {
  transform: translateY(-1px);
}

body[data-page="miembros"] .cuotas-summary-card:focus-visible {
  outline: 3px solid rgba(32, 94, 174, .18);
  outline-offset: 2px;
}

body[data-page="miembros"] .cuotas-summary-card.is-paid.is-active {
  background: #d9f1e4;
  border-color: #72b995;
  box-shadow: 0 0 0 2px rgba(8, 115, 74, .08) inset;
}

body[data-page="miembros"] .cuotas-summary-card.is-active {
  position: relative;
  padding-right: 44px;
}

body[data-page="miembros"] .cuotas-summary-card.is-active::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

body[data-page="miembros"] .cuotas-summary-card.is-paid.is-active::after {
  background: #0b7f52;
}

body[data-page="miembros"] .cuotas-summary-card.is-pending.is-active::after {
  background: #9a6a08;
}

body[data-page="miembros"] .cuotas-summary-card.is-missing.is-active::after {
  background: #526781;
}

body[data-page="miembros"] .cuotas-summary-card.is-pending.is-active {
  background: #ffedb8;
  border-color: #d1a947;
  box-shadow: 0 0 0 2px rgba(138, 99, 21, .08) inset;
}

body[data-page="miembros"] .cuotas-summary-card.is-missing.is-active {
  background: #e2e8f1;
  border-color: #9eacc0;
  box-shadow: 0 0 0 2px rgba(96, 112, 143, .08) inset;
}

body[data-page="miembros"] .cuotas-summary-card.is-active span,
body[data-page="miembros"] .cuotas-summary-card.is-active strong {
  color: #243b60;
}

body[data-page="miembros"] .cuotas-admin-table {
  min-width: 680px;
}

body[data-page="miembros"] .cuotas-admin-table th:nth-child(1) {
  width: 42%;
}

body[data-page="miembros"] .cuotas-admin-table th:nth-child(2),
body[data-page="miembros"] .cuotas-admin-table th:nth-child(3) {
  width: 25%;
}

body[data-page="miembros"] .cuotas-admin-table .cuota-expand-column {
  width: 48px;
}

body[data-page="miembros"] .cuota-member-row {
  cursor: pointer;
}

body[data-page="miembros"] .cuota-member-row.has-pending>td {
  background: #fff8e7;
}

body[data-page="miembros"] .cuota-member-row.has-pending>td:first-child {
  box-shadow: inset 4px 0 0 #d42d2d;
}

body[data-page="miembros"] .cuota-member-row:hover>td {
  background: #f8fbff;
}

body[data-page="miembros"] .cuota-member-row.has-pending:hover>td {
  background: #fff4d6;
}

body[data-page="miembros"] .cuota-member-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body[data-page="miembros"] .cuota-member-toggle>span:first-child {
  min-width: 0;
}

body[data-page="miembros"] .cuota-member-toggle strong,
body[data-page="miembros"] .cuota-member-toggle small {
  display: block;
}

body[data-page="miembros"] .cuota-member-toggle strong {
  color: #263e64;
  font-size: 12.5px;
}

body[data-page="miembros"] .cuota-member-toggle small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
}

body[data-page="miembros"] .cuota-member-toggle:focus-visible {
  outline: 2px solid rgba(32, 94, 174, .35);
  outline-offset: 4px;
  border-radius: 4px;
}

body[data-page="miembros"] .cuota-pending-indicator {
  display: inline-flex;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f4d77e;
  color: #71500d;
  font-size: 9.5px;
  font-weight: 800;
}

body[data-page="miembros"] .cuota-expand-cell {
  text-align: right !important;
}

body[data-page="miembros"] .cuota-expand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #d9e2ed;
  border-radius: 8px;
  background: #fff;
}

body[data-page="miembros"] .cuota-expand-button>span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
  line-height: 1;
  position: relative;
  top: -1px;
  transition: transform .16s ease;
}

body[data-page="miembros"] .cuota-expand-button[aria-expanded="true"]>span {
  transform: rotate(180deg);
}

body[data-page="miembros"] .cuota-member-detail-row>td {
  padding: 0 !important;
  background: #f8fafc;
}

body[data-page="miembros"] .cuota-member-detail-row:hover {
  background: #f8fafc !important;
}

body[data-page="miembros"] .cuota-member-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid #e5ebf2;
}

body[data-page="miembros"] .cuota-detail-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid #dce4ee;
  border-radius: 11px;
  background: #fff;
}

body[data-page="miembros"] .cuota-detail-card.is-pending {
  border-color: #e4c365;
  background: #fffaf0;
}

body[data-page="miembros"] .cuota-detail-card.is-paid {
  border-color: #c9e5d5;
  background: #f7fcf9;
}

body[data-page="miembros"] .cuota-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

body[data-page="miembros"] .cuota-detail-heading>div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-page="miembros"] .cuota-detail-heading>div>strong {
  color: #263e64;
  font-size: 12.5px;
}

body[data-page="miembros"] .cuota-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

body[data-page="miembros"] .cuota-detail-grid>div {
  min-width: 0;
}

body[data-page="miembros"] .cuota-detail-grid span,
body[data-page="miembros"] .cuota-review-meta span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
}

body[data-page="miembros"] .cuota-detail-grid strong,
body[data-page="miembros"] .cuota-review-meta strong {
  display: block;
  overflow-wrap: anywhere;
  color: #263e64;
  font-size: 11.5px;
  font-weight: 700;
}

body[data-page="miembros"] .modal-cuota-revision-overlay {
  z-index: 90;
}

body[data-page="miembros"] .modal-cuota-revision {
  width: min(900px, calc(100vw - 36px));
  max-width: 900px;
  max-height: 92vh;
  overflow-y: auto;
}

body[data-page="miembros"] .cuota-review-header .modal-sub {
  margin-bottom: 0;
}

body[data-page="miembros"] .cuota-review-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 12px;
}

body[data-page="miembros"] .cuota-review-meta>div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fafc;
}

body[data-page="miembros"] .cuota-review-meta .quota-status-chip {
  margin-top: 2px;
}

body[data-page="miembros"] .cuota-proof-frame-wrap {
  width: 100%;
  height: min(56vh, 580px);
  min-height: 320px;
  overflow: auto;
  border: 1px solid #d8e1ec;
  border-radius: 11px;
  background: #eef2f6;
}

body[data-page="miembros"] .cuota-proof-preview {
  display: flex;
  min-height: 100%;
  padding: 14px;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

body[data-page="miembros"] .cuota-proof-preview>.loading {
  margin: auto;
}

body[data-page="miembros"] .cuota-proof-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(19, 46, 82, .12);
}

body[data-page="miembros"] .cuota-proof-image-canvas {
  margin: auto;
}

body[data-page="miembros"] .cuota-proof-pdf-page {
  flex: 0 0 auto;
}

body[data-page="miembros"] .cuota-proof-preview-error {
  display: grid;
  gap: 6px;
  margin: auto;
  max-width: 560px;
  padding: 18px;
  text-align: center;
  border: 1px solid #e0e7ef;
  border-radius: 10px;
  background: #fff;
}

body[data-page="miembros"] .cuota-proof-preview-error strong {
  color: #263e64;
}

body[data-page="miembros"] .cuota-proof-preview-error span {
  color: var(--muted);
  font-size: 12px;
}

body[data-page="miembros"] .cuota-review-file-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

body[data-page="miembros"] #revisionCuotaControles[hidden] {
  display: none !important;
}

body[data-page="miembros"] .modal-cuota-revision .cuotas-rejection-field {
  margin-top: 4px;
}

body[data-page="miembros"] .cuota-review-actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  body[data-page="miembros"] .cuota-member-details {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  body[data-page="miembros"] .cuota-detail-grid {
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="miembros"] .modal-cuota-revision {
    width: 94vw;
    max-height: 94vh;
    padding: 20px 16px;
  }

  body[data-page="miembros"] .cuota-review-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="miembros"] .cuota-proof-frame-wrap {
    height: 42vh;
    min-height: 240px;
  }
}

/* -------------------------------------------------------------------------- */
/* Documento de identificación: selector de tipo + identificador              */
/* -------------------------------------------------------------------------- */
.identity-document-control {
  display: grid;
  grid-template-columns: minmax(150px, .85fr) minmax(0, 1.35fr);
  gap: 8px;
  align-items: stretch;
}

.identity-document-control>select,
.identity-document-control>input {
  min-width: 0;
  width: 100%;
}

.identity-document-control>select {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
}

@media (max-width: 620px) {
  .identity-document-control {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------- */
/* ROLES COMBINABLES JUGADOR / TÉCNICO Y DOCUMENTACIÓN TÉCNICA              */
/* -------------------------------------------------------------------------- */
.member-role-field {
  min-width: 0;
}

.member-role-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.member-role-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-solid);
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
}

.member-role-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.member-role-option input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--primary);
}

.technical-background-current {
  min-height: 68px;
}

.technical-background-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-solid);
}

.technical-background-file>div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.technical-background-file strong {
  overflow-wrap: anywhere;
}

.technical-background-file span {
  color: var(--muted);
  font-size: 12px;
}

.technical-background-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

@media (max-width: 700px) {

  .member-role-options,
  .technical-background-file,
  .technical-background-actions {
    width: 100%;
  }

  .member-role-option {
    flex: 1 1 140px;
  }

  .technical-background-file {
    align-items: stretch;
    flex-direction: column;
  }

  .technical-background-actions .btn {
    flex: 1 1 130px;
  }
}

/* Solicitudes de antecedentes penales */
body[data-page="area-miembro"] .member-status-banner.rejected {
  border-color: #efc0bc;
  background: #fff2f0;
  color: #9f2f28;
}

body[data-page="area-miembro"] .member-background-rejected {
  background: var(--danger-bg);
  color: var(--danger);
}


/* -------------------------------------------------------------------------- */
/* Visor integrado de justificantes + tipo compacto en tabla de miembros       */
/* -------------------------------------------------------------------------- */
.member-type-list {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* El + de Tipo reutiliza exactamente el mismo pill que Equipo(s) y Temporada(s). */
.member-type-more {
  flex: 0 0 27px;
}

.embedded-proof-viewer-overlay {
  z-index: 10150 !important;
  padding: 3vh 3vw;
}

.embedded-proof-viewer-modal {
  width: min(1040px, 94vw);
  height: min(92vh, 900px);
  max-width: none;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.embedded-proof-viewer-header {
  flex: 0 0 auto;
}

.embedded-proof-preview {
  flex: 1 1 auto;
  min-height: 260px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  background: #eef2f7;
}

.embedded-proof-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(23, 42, 69, .12);
}

.embedded-proof-viewer-actions {
  flex: 0 0 auto;
  margin-top: 0;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .embedded-proof-viewer-overlay {
    padding: 2vh 2vw;
  }

  .embedded-proof-viewer-modal {
    width: 96vw;
    height: 94vh;
    max-height: 94vh;
    padding: 14px;
  }

  .embedded-proof-preview {
    padding: 8px;
    min-height: 220px;
  }
}

/* Invitado / Patrocinador en alta/edición de socios. */

.socio-invitado-field .socio-special-status-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}
.socio-invitado-field .checkbox-label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: fit-content;
  cursor: pointer;
}

.socio-invitado-field .checkbox-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  padding: 0;
}

.socio-invitado-field .checkbox-label span {
  line-height: 1.2;
}