/*
 * V12.6 · Paleta alineada con la tienda online El Cau Lúdic
 * Referencia visual: PrestaShop actual (blancos/grises + turquesa/cian).
 */
:root {
  --bg: #f6f6f6;
  --panel: #ffffff;
  --panel-soft: #f8f8f8;
  --panel-muted: #eeeeee;
  --line: #ebebeb;
  --line-strong: #dddddd;
  --text: #232323;
  --muted: #7a7a7a;
  --accent: #24b9d7;
  --accent-strong: #1e788c;
  --accent-soft: #e9f8fb;
  --success: #168a55;
  --success-soft: #e9f8f0;
  --warning: #b87900;
  --warning-soft: #fff5dd;
  --danger: #bf3a3a;
  --danger-soft: #fff0f0;
  --info-soft: #edf9fb;
  --shadow-sm: 0 8px 20px rgba(15, 23, 42, .05);
  --shadow-md: 0 18px 45px rgba(15, 23, 42, .08);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(36,185,215,.10), transparent 28rem),
    linear-gradient(180deg, #fafafa 0%, #f6f6f6 100%);
  color: var(--text);
  min-height: 100vh;
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
small { color: var(--muted); }

.wrap {
  width: min(var(--wrap), calc(100% - 32px));
  margin: 0 auto;
}

main.wrap {
  padding-top: 26px;
  padding-bottom: 56px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(235,235,235,.95);
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(16px);
}

.topbar-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #24b9d7, #1e788c);
  color: #fff;
  font-size: 23px;
  box-shadow: 0 10px 22px rgba(36,185,215,.20);
}
.brand strong,
.brand small {
  display: block;
}
.brand strong {
  font-size: 17px;
  line-height: 1.1;
}
.brand small {
  color: var(--muted);
  margin-top: 3px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.text-link:hover { text-decoration: none; background: var(--panel-soft); }

h1, h2, h3 {
  margin: 0;
  letter-spacing: -.03em;
  color: var(--text);
}
h1 { font-size: clamp(1.95rem, 4.6vw, 3rem); line-height: 1.02; }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
h3 { font-size: 1.08rem; }

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lead, .section-description {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

.lookup-card,
.section {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-md);
}

.lookup-card {
  width: min(720px, 100%);
  margin: 8vh auto;
  padding: 34px;
}

.lookup-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid #cceef4;
  font-size: 30px;
  margin-bottom: 20px;
}

.auth-wrap {
  width: min(720px, calc(100% - 32px));
  margin: 42px auto;
}

.player-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top right, rgba(36,185,215,.12), transparent 18rem),
    linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  box-shadow: var(--shadow-md);
}
.player-strip > div:last-child { min-width: 0; }
.player-strip small {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.player-strip h1 {
  margin-bottom: 6px;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}
.player-strip strong {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--accent-strong);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #dff7fb, #f0fbfd);
  color: var(--accent-strong);
  font-weight: 800;
  border: 3px solid #fff;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .08);
  flex: 0 0 auto;
}
.avatar-lg { width: 76px; height: 76px; font-size: 28px; }
.avatar-xl { width: 112px; height: 112px; font-size: 40px; }
.avatar-fallback { border-color: #e2f6fa; }

.portal-nav,
.admin-nav,
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-sm);
}

.portal-nav a,
.admin-nav a,
.filter-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
  transition: .18s ease;
}
.portal-nav a:hover,
.admin-nav a:hover,
.filter-row a:hover {
  background: var(--panel-muted);
  color: var(--text);
}
.portal-nav a.is-active,
.admin-nav a.is-active,
.filter-row a.is-active {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 6px 16px rgba(36,185,215,.24);
}
.admin-nav form { margin-left: auto; }
.admin-nav form button { min-height: 42px; }

.section {
  margin-top: 24px;
  padding: 24px;
}
.section:first-of-type { margin-top: 22px; }

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
}
.section-title-row > div { min-width: 0; }
.section-title-row > a { font-weight: 700; }

.notice-success,
.alert {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid;
  font-size: 14px;
  line-height: 1.5;
}
.notice-success {
  background: var(--success-soft);
  border-color: #cfead8;
  color: var(--success);
}
.alert {
  background: var(--danger-soft);
  border-color: #f0caca;
  color: var(--danger);
}

.metric-grid,
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.metric,
.summary-card,
.activity-card,
.points-card {
  padding: 20px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.metric strong,
.summary-card strong,
.activity-card strong,
.points-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1.95rem;
  line-height: 1;
}
.metric span,
.summary-card div span,
.activity-card > span,
.points-card span,
.points-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.points-card strong { color: var(--accent-strong); }
.activity-card h3 {
  margin-top: 10px;
  font-size: 15px;
}
.activity-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.activity-head > span { color: var(--muted); font-size: 12px; }
.activity-head > b { color: var(--accent-strong); }
.summary-card {
  display: flex;
  align-items: center;
  gap: 15px;
}
.summary-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--panel-muted);
  font-size: 22px;
}
.economy-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
  margin-top: 18px;
}
.economy-stack .points-card {
  min-width: 180px;
}
.xp-card {
  background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
}

.mission-grid,
.reward-grid,
.achievement-grid,
.achievement-catalog,
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.achievement-catalog { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.game-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.mission-card,
.reward-card,
.achievement-card,
.achievement-progress-card,
.achievement-catalog-card,
.game-edit {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: var(--shadow-sm);
}

.mission-card,
.reward-card,
.achievement-progress-card,
.achievement-catalog-card,
.achievement-card {
  padding: 20px;
}

.mission-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mission-card h3,
.reward-card h3,
.achievement-card h3,
.achievement-catalog-card h3 {
  font-size: 1.18rem;
}
.mission-card p,
.reward-card p,
.achievement-card p,
.catalog-description,
.achievement-top p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}
.mission-card-head,
.reward-top,
.reward-meta,
.achievement-top,
.achievement-card-head,
.catalog-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.catalog-card-header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}
.mission-card-head > div,
.reward-top > div,
.reward-meta > div,
.achievement-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tag,
.status-badge,
.rarity,
.category-pill,
.achievement-category,
.achievement-state-badge,
.redemption-status,
.reward-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tag,
.category-pill,
.achievement-category,
.redemption-status,
.reward-status,
.achievement-state-badge.state-not_started {
  border: 1px solid var(--line);
  background: var(--panel-muted);
  color: var(--muted);
}
.status-badge { border: 1px solid transparent; }
.status-pending { background: var(--warning-soft); color: var(--warning); border-color: #f0deb0; }
.status-in_progress { background: #eaf8fb; color: var(--accent-strong); border-color: #cbeaf0; }
.status-rejected,
.status-not_completed { background: var(--danger-soft); color: var(--danger); border-color: #f1d2d2; }
.status-completed,
.reward-status-ok,
.achievement-state-badge.state-completed,
.redemption-available .redemption-status { background: var(--success-soft); color: var(--success); border-color: #cae7d5; }
.achievement-state-badge.state-in_progress,
.reward-status-points,
.redemption-consumed .redemption-status { background: var(--accent-soft); color: var(--accent-strong); border-color: #cdebf1; }
.reward-status-locked { background: var(--panel-muted); color: var(--muted); }
.reward-status-soldout,
.reward-status-limit { background: var(--danger-soft); color: var(--danger); }

.progress,
.progress-track {
  height: 10px;
  background: #edf2f7;
  border-radius: 999px;
  overflow: hidden;
}
.progress span,
.progress-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #62cadf);
}
.progress-track.small { height: 7px; }
.progress-label,
.requirement-label,
.mission-meta,
.reward-availability,
.reward-requirements-title,
.achievement-date,
.security-note,
.section-counter {
  color: var(--muted);
  font-size: 12px;
}
.progress-label,
.requirement-label,
.mission-progress-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.mission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

button,
.mission-btn,
.filter-reset,
.scan-button,
.scan-another-button,
.camera-start,
.secondary-button {
  appearance: none;
  border: 0;
  border-radius: 12px;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: .18s ease;
}
button:hover,
.mission-btn:hover,
.filter-reset:hover,
.scan-button:hover,
.scan-another-button:hover,
.camera-start:hover,
.secondary-button:hover {
  transform: translateY(-1px);
}
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.mission-btn-primary,
button,
.camera-start {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  box-shadow: 0 10px 20px rgba(36,185,215,.20);
}
.mission-btn-secondary,
.secondary-button,
.filter-reset,
.scan-another-button {
  background: var(--panel-muted);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}
.mission-btn-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid #f2d3d3; }

.admin-form {
  display: grid;
  gap: 18px;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.admin-full { grid-column: 1 / -1; }
label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
input,
textarea,
select {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  padding: 11px 13px;
  font: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { min-height: 120px; resize: vertical; }
input:focus,
textarea:focus,
select:focus {
  border-color: #77cfdf;
  box-shadow: 0 0 0 4px rgba(36,185,215,.12);
}

.admin-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 23px;
  font-weight: 700;
}
.admin-check input[type="checkbox"],
.game-edit input[type="checkbox"],
.check-list input[type="checkbox"],
.requirement-check-grid input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: auto;
  margin: 0;
  accent-color: var(--accent-strong);
}

.game-edit,
.check-list label,
.requirement-check-grid label {
  padding: 14px;
}
.game-edit label,
.check-list label,
.requirement-check-grid label { margin: 0; }
.check-list,
.req-list,
.requirements-list,
.reward-requirements ul,
.requirements,
.reward-requirements {
  list-style: none;
  margin: 0;
  padding: 0;
}
.check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.req-list,
.requirements-list,
.reward-requirements ul,
.requirements {
  display: grid;
  gap: 8px;
}
.req-list li,
.requirements-list li,
.reward-requirements li,
.requirement {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.req-list li,
.reward-requirements li,
.requirements-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.req-list li.is-complete,
.reward-requirements li.is-complete,
.requirements-list li.is-complete,
.requirement.is-complete {
  color: var(--success);
  background: var(--success-soft);
  border-color: #d3e8db;
}
.requirement-state {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 11px;
}
.requirement.is-complete .requirement-state {
  color: var(--success);
  border-color: #b8dcc8;
}
.requirement-picker {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}
.requirement-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.requirement-check-grid label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.requirement-check-grid span {
  display: grid;
  gap: 4px;
}
.requirement-check-grid small { color: var(--muted); }

.admin-table-wrap,
.timeline,
.redemption-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.admin-table-wrap { overflow: auto; }
.admin-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}
.admin-table th,
.admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.admin-table th {
  background: #f7f9fc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-table tbody tr:hover { background: #fbfdff; }
.admin-table td strong { display: block; }
.admin-table td small,
.timeline-item small { display: block; margin-top: 4px; color: var(--muted); }
.admin-actions,
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.small-number {
  width: 76px !important;
  min-height: 38px;
  padding: 8px 10px !important;
}

.timeline { display: grid; }
.timeline-item,
.redemption-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.timeline-item:last-child,
.redemption-row:last-child,
.timeline-row:last-child { border-bottom: 0; }
.timeline-icon,
.redemption-icon,
.achievement-symbol,
.achievement-medal {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--panel-muted);
  font-size: 21px;
}
.timeline-item strong,
.redemption-main strong,
.redemption-main span,
.timeline-row strong,
.timeline-row span { display: block; }
.redemption-main span,
.timeline-row span,
.timeline-row time { color: var(--muted); font-size: 12px; }
.redemption-row > div:last-child { justify-self: end; }

.reward-card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.reward-visual {
  min-height: 110px;
  margin: -20px -20px 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #edf9fb 0%, #f8fdfe 100%);
  border-bottom: 1px solid var(--line);
}
.reward-visual > span { font-size: 44px; }
.reward-lock {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
}
.reward-footer,
.catalog-card-footer,
.achievement-earned {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
}
.reward-cost strong,
.catalog-reward strong { color: var(--accent-strong); }
.reward-cost span,
.catalog-reward span,
.reward-action-hint,
.security-note,
.achievement-date { color: var(--muted); }
.reward-points { color: var(--warning); font-weight: 800; white-space: nowrap; }
.reward-card.reward-redeemable { border-color: #d3e6da; }
.reward-card.reward-locked,
.reward-soldout,
.reward-limit,
.redemption-cancelled,
.achievement-catalog-card.achievement-status-not_started { opacity: .82; }

.achievement-progress-list { display: grid; gap: 14px; }
.achievement-progress-card,
.achievement-catalog-card,
.achievement-card { position: relative; overflow: hidden; }
.achievement-progress-card::before,
.achievement-catalog-card::before,
.achievement-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ced6df;
}
.rarity-common::before { background: #b8c0cc; }
.rarity-rare::before { background: #36a269; }
.rarity-epic::before { background: #3f9fb3; }
.rarity-legendary::before { background: #d69211; }
.rarity-common { background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%); }
.rarity-rare { background: linear-gradient(180deg, #f8fff9 0%, #ffffff 100%); }
.rarity-epic { background: linear-gradient(180deg, #f7fbfc 0%, #ffffff 100%); }
.rarity-legendary { background: linear-gradient(180deg, #fffaf1 0%, #ffffff 100%); }
.achievement-title-zone {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.achievement-card footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.achievement-earned strong {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}
.achievement-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}
.filter-block > label,
.filter-block > legend,
.status-filter legend {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.filter-category select { background: #fff; }
.status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.status-filter legend { flex-basis: 100%; }
.status-toggle { cursor: pointer; }
.status-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.status-toggle > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.status-toggle > span > b,
.status-toggle > span > small {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-muted);
  color: var(--text);
  font-size: 10px;
}
.status-toggle input:checked + span {
  color: var(--accent-strong);
  border-color: #cbeaf0;
  background: var(--accent-soft);
}
.status-toggle-completed input:checked + span {
  color: var(--success);
  border-color: #cfe7d8;
  background: var(--success-soft);
}
.achievement-filter-summary {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}
.achievement-filter-summary > span:first-child { color: var(--text); font-weight: 800; }
.achievement-filter-empty { margin-top: 14px; }
.achievement-filter-empty[hidden],
.achievement-catalog-card[hidden] { display: none !important; }

.profile-editor {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}
.danger-zone {
  border: 1px solid #f0d5d5;
  background: #fff9f9;
}
.empty-state {
  padding: 22px;
  border: 1px dashed #d5dde8;
  border-radius: var(--radius);
  background: #fbfcfe;
  color: var(--muted);
}
.back-link { font-weight: 700; }


.player-name,
.player-code { color: var(--muted); }
.player-code { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.positive { color: var(--success); font-weight: 800; }
.negative { color: var(--danger); font-weight: 800; }

/* Scanner */
.scan-button {
  width: 100%;
  margin-top: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid #cbeaf0;
}
.scanner-open { overflow: hidden; }
.scanner-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.scanner-modal.is-open { display: grid; place-items: center; }
.scanner-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(6px);
}
.scanner-dialog {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 22px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 90px rgba(15, 23, 42, .22);
}
.scanner-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.scanner-close {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  background: var(--panel-muted);
  color: var(--text);
}
.scanner-help,
.scanner-status,
.scanner-file label {
  color: var(--muted);
  font-size: 13px;
}
.qr-reader {
  width: 100%;
  min-height: 240px;
  border-radius: 18px;
  overflow: hidden;
  background: #0f1720;
}
.qr-reader video { border-radius: 18px !important; object-fit: cover; }
.scanner-status {
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: 12px;
  background: var(--panel-soft);
}
.scanner-status-success { color: var(--success); background: var(--success-soft); }
.scanner-status-error { color: var(--danger); background: var(--danger-soft); }
.scanner-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.scanner-file {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.footer {
  padding: 28px 0 38px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1100px) {
  .metric-grid,
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .achievement-filters,
  .requirement-check-grid { grid-template-columns: 1fr 1fr; }
  .achievement-filters { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .player-strip,
  .profile-editor,
  .section-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .portal-nav,
  .admin-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 12px;
  }
  .portal-nav a,
  .admin-nav a { white-space: nowrap; }
  .admin-nav form { margin-left: 0; }
  .catalog-card-header {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .achievement-state-badge {
    grid-column: 2;
    justify-self: start;
  }
  .timeline-item,
  .redemption-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .redemption-row > div:last-child,
  .timeline-item > div:last-child { justify-self: start; }
}

@media (max-width: 640px) {
  .wrap { width: min(calc(100% - 20px), var(--wrap)); }
  main.wrap { padding-top: 18px; padding-bottom: 32px; }
  .lookup-card,
  .section,
  .player-strip { padding: 18px; }
  .auth-wrap { margin: 20px auto; }
  .lookup-card { margin: 0 auto; }
  .metric-grid,
  .summary-grid,
  .admin-grid,
  .achievement-grid,
  .scanner-actions,
  .check-list,
  .requirement-check-grid { grid-template-columns: 1fr; }
  .economy-stack { justify-content: stretch; }
  .economy-stack .points-card { width: 100%; min-width: 0; }
  .admin-table { min-width: 700px; }
  .input-row { grid-template-columns: 1fr; }
  .mission-actions,
  .inline-form { width: 100%; }
  .mission-actions > *,
  .inline-form > * { flex: 1 1 auto; }
  button,
  .mission-btn,
  .filter-reset,
  .scan-button,
  .scan-another-button,
  .camera-start,
  .secondary-button { width: 100%; }
}

/* =========================================================
   V12.2 · SELECTOR ESCALABLE DE MISIONES PARA LOGROS
   ========================================================= */
.mission-picker {
  margin-top: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #f8faff;
}
.mission-picker-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
}
.mission-picker-count {
  min-width: 128px;
  padding: 13px 16px;
  border: 1px solid #cbeaf0;
  border-radius: 14px;
  background: var(--accent-soft);
  text-align: right;
}
.mission-picker-count strong,
.mission-picker-count span { display: block; }
.mission-picker-count strong {
  color: var(--accent-strong);
  font-size: 1.55rem;
  line-height: 1;
}
.mission-picker-count span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mission-picker-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr);
  gap: 16px;
  align-items: start;
}
.mission-picker-browser,
.mission-picker-selected-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.mission-picker-selected-panel {
  position: sticky;
  top: 94px;
}
.mission-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) repeat(3, minmax(120px, .7fr));
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcff;
}
.mission-picker-toolbar label {
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mission-picker-toolbar input,
.mission-picker-toolbar select {
  min-height: 42px;
  padding: 9px 11px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
}
.mission-picker-subhead {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.mission-picker-subhead > div { display: grid; gap: 2px; }
.mission-picker-subhead strong { font-size: 13px; }
.mission-picker-subhead span {
  color: var(--muted);
  font-size: 11px;
}
.mission-picker-list {
  min-height: 250px;
  max-height: 520px;
  overflow-y: auto;
  background: #fff;
}
.mission-picker-list.is-loading { opacity: .6; pointer-events: none; }
.mission-picker-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.mission-picker-item:last-child { border-bottom: 0; }
.mission-picker-item:hover { background: #f9fbff; }
.mission-picker-item.is-selected { background: #f2f7ff; }
.mission-picker-item-main { min-width: 0; }
.mission-picker-item-main strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-picker-item-main small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-picker-toggle,
.mission-picker-page,
.mission-picker-clear {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
}
.mission-picker-toggle {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid #cbeaf0;
}
.mission-picker-toggle.is-remove,
.mission-picker-clear {
  background: #fff;
  color: var(--danger);
  border: 1px solid #efd0d0;
}
.mission-picker-pager {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: #fbfcff;
}
.mission-picker-pager:empty { display: none; }
.mission-picker-pager span {
  color: var(--muted);
  font-size: 11px;
}
.mission-picker-page {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}
.mission-picker-page:disabled,
.mission-picker-clear:disabled { opacity: .38; cursor: default; transform: none; }
.mission-picker-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.achievement-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}
.achievement-form-actions .mission-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 1050px) {
  .mission-picker-layout { grid-template-columns: 1fr; }
  .mission-picker-selected-panel { position: static; }
  .mission-picker-toolbar { grid-template-columns: 1fr 1fr; }
  .mission-picker-search { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .mission-picker { padding: 14px; }
  .mission-picker-heading { align-items: stretch; flex-direction: column; }
  .mission-picker-count { text-align: left; }
  .mission-picker-toolbar { grid-template-columns: 1fr; }
  .mission-picker-search { grid-column: auto; }
  .mission-picker-list { max-height: 400px; }
  .mission-picker-toggle,
  .mission-picker-page,
  .mission-picker-clear { width: auto; }
  .mission-picker-item { grid-template-columns: minmax(0, 1fr); }
  .mission-picker-toggle { justify-self: start; }
}

/* V12.4 · Catálogo paginado de logros */
.admin-list-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 16px;
}
.catalog-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.catalog-pager span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 700px) {
  .admin-list-toolbar { grid-template-columns: 1fr; }
  .catalog-pager { flex-wrap: wrap; }
}

/* V12.5 · Portal de logros escalable */
.achievement-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  margin: 18px 0 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}
.achievement-search-form .mission-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.achievement-status-nav { margin-top: 0; }
.achievement-player-card { min-height: 245px; }
.achievement-player-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.pagination span { color: var(--muted); background: var(--panel-soft); }
@media (max-width: 640px) {
  .achievement-search-form { grid-template-columns: 1fr; }
  .pagination { display: grid; grid-template-columns: 1fr; }
}

/* V12.6.1 BETA · Filtros de jugadores en tablas de backoffice */
.table-filter {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  margin: 18px 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}
.table-filter-search {
  min-width: 0;
}
.table-filter-search > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.table-filter input[type="search"] {
  min-width: 0;
}
.table-filter .mission-btn,
.table-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}
.table-result-summary {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.table-pagination a,
.table-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.table-pagination a:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.table-pagination span {
  color: var(--muted);
  background: var(--panel-soft);
}

@media (max-width: 720px) {
  .table-filter { grid-template-columns: 1fr; }
  .table-pagination { flex-wrap: wrap; }
  .table-filter .mission-btn,
  .table-filter-clear { width: 100%; }
}

/* V12.6.2 BETA · Gestión de misiones por jugador */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.table-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.table-action-link:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--accent-soft);
  text-decoration: none;
}
.table-action-primary {
  border-color: rgba(36,185,215,.32);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.player-missions-filter {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) minmax(170px, .7fr) minmax(170px, .7fr) auto auto;
  gap: 10px;
  align-items: end;
  margin: 18px 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}
.player-missions-filter label > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.player-missions-filter .mission-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}
.player-missions-table {
  min-width: 1050px;
}
.mission-progress-cell {
  min-width: 150px;
}
.mission-progress-cell .progress {
  width: 140px;
  max-width: 100%;
  margin: 8px 0 0;
}
.player-mission-actions {
  display: grid;
  gap: 7px;
  min-width: 190px;
}
.player-mission-actions .inline-form {
  flex-wrap: nowrap;
}
.admin-action-note {
  display: inline-block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .player-missions-filter {
    grid-template-columns: 1fr 1fr;
  }
  .player-missions-search {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .player-missions-filter {
    grid-template-columns: 1fr;
  }
  .player-missions-search {
    grid-column: auto;
  }
  .row-actions {
    min-width: 180px;
  }
}

/* V12.6.7 · Área pública */
.public-body { background: #f6f6f6; }
.public-main { padding-top: 28px; }
.public-header-nav { display:flex; align-items:center; gap:8px; }
.public-header-nav a { display:inline-flex; align-items:center; min-height:40px; padding:0 13px; border-radius:999px; color:var(--muted); font-weight:800; text-decoration:none; }
.public-header-nav a:hover,.public-header-nav a.is-active { color:var(--accent-strong); background:var(--accent-soft); }
.public-header-nav .public-login-link { background:var(--accent); color:#fff; }
.public-header-nav .public-login-link:hover { background:var(--accent-strong); color:#fff; }
.public-hero { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.65fr); gap:24px; align-items:stretch; padding:34px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(135deg,#fff 0%,#f5fcfe 62%,#e8f8fb 100%); box-shadow:var(--shadow-md); }
.public-hero h1 { max-width:760px; }
.public-hero p:not(.eyebrow) { max-width:650px; color:var(--muted); line-height:1.65; font-size:16px; }
.public-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.public-primary,.public-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:12px; font-weight:900; text-decoration:none; }
.public-primary { background:var(--accent); color:#fff; }
.public-primary:hover { background:var(--accent-strong); color:#fff; text-decoration:none; }
.public-secondary { background:#fff; color:var(--text); border:1px solid var(--line); }
.public-secondary:hover { text-decoration:none; border-color:var(--accent); color:var(--accent-strong); }
.public-hero-badge { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:9px; padding:28px; border-radius:22px; background:#fff; border:1px solid rgba(36,185,215,.22); }
.public-hero-badge > span { font-size:52px; }
.public-hero-badge strong { font-size:18px; }
.public-hero-badge small { max-width:220px; line-height:1.5; }
.public-section { box-shadow:var(--shadow-sm); }
.public-page-head { padding:26px 2px 4px; }
.public-page-head p:not(.eyebrow) { color:var(--muted); line-height:1.6; }
.public-reward-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.public-reward-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.public-reward-image { position:relative; aspect-ratio:4/3; overflow:hidden; background:linear-gradient(145deg,#eaf9fc,#f9fdfe); }
.public-reward-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.public-reward-card:hover .public-reward-image img { transform:scale(1.035); }
.public-reward-placeholder { width:100%; height:100%; display:grid; place-items:center; font-size:54px; }
.public-reward-category { position:absolute; top:10px; left:10px; padding:5px 8px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--accent-strong); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.public-reward-body { display:flex; flex:1; flex-direction:column; gap:9px; padding:15px; }
.public-reward-body h3 { font-size:17px; line-height:1.25; }
.public-reward-body p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.public-reward-footer { display:flex; justify-content:space-between; gap:12px; align-items:flex-end; margin-top:auto; padding-top:8px; }
.public-reward-footer > div:first-child strong { display:block; color:var(--accent-strong); font-size:24px; line-height:1; }
.public-reward-footer > div:first-child span { color:var(--muted); font-size:11px; text-transform:uppercase; font-weight:800; }
.public-stock { padding:5px 8px; border-radius:999px; background:var(--success-soft); color:var(--success); font-size:10px; font-weight:900; white-space:nowrap; }
.public-ranking-list { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; }
.public-ranking-row { display:grid; grid-template-columns:48px 48px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.public-ranking-row:last-child { border-bottom:0; }
.public-rank { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--panel-soft); color:var(--muted); font-weight:900; }
.public-rank.top-0 { background:#fff0b8; color:#8b6500; }
.public-rank.top-1 { background:#eef1f5; color:#5d6874; }
.public-rank.top-2 { background:#f6dfcb; color:#875021; }
.public-rank-avatar { width:44px; height:44px; font-size:16px; }
.public-rank-player { min-width:0; }
.public-rank-player strong,.public-rank-player small { display:block; }
.public-rank-player a { color:var(--text); }
.public-rank-player a:hover { color:var(--accent-strong); }
.public-rank-player small { margin-top:3px; color:var(--muted); }
.public-rank-xp { color:var(--accent-strong); font-size:18px; white-space:nowrap; }
.public-rank-xp small { color:var(--muted); font-size:10px; }
.public-profile-hero { display:flex; align-items:center; gap:22px; padding:28px; border:1px solid var(--line); border-radius:26px; background:linear-gradient(135deg,#fff,#eefbfd); box-shadow:var(--shadow-md); }
.public-profile-avatar { width:112px; height:112px; font-size:40px; }
.public-profile-xp { display:flex; align-items:baseline; gap:8px; margin-top:10px; }
.public-profile-xp strong { color:var(--accent-strong); font-size:34px; }
.public-profile-xp span { color:var(--muted); font-weight:800; text-transform:uppercase; font-size:11px; }
.public-achievement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.public-achievement-card { position:relative; overflow:hidden; display:grid; grid-template-columns:46px minmax(0,1fr); gap:13px; padding:17px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.public-achievement-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#b8c0cc; }
.public-achievement-card.rarity-rare::before { background:#36a269; }.public-achievement-card.rarity-epic::before { background:#6d59d8; }.public-achievement-card.rarity-legendary::before { background:#d69211; }
.public-achievement-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--panel-soft); font-size:20px; }
.public-achievement-card h3 { margin:8px 0 5px; }
.public-achievement-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.public-achievement-card footer { display:flex; justify-content:space-between; gap:10px; margin-top:12px; color:var(--muted); font-size:11px; }
.public-achievement-card footer strong { color:var(--accent-strong); }
.public-footer { margin-top:32px; border-top:1px solid var(--line); background:#fff; }
.public-footer .wrap { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--muted); font-size:12px; }

@media (max-width: 980px) {
  .public-reward-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .public-achievement-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .public-hero { grid-template-columns:1fr; }
  .public-hero-badge { min-height:150px; }
}
@media (max-width: 640px) {
  .public-topbar .topbar-inner { align-items:flex-start; flex-direction:column; padding:12px 0; }
  .public-header-nav { width:100%; overflow-x:auto; padding-bottom:2px; }
  .public-header-nav a { white-space:nowrap; }
  .public-hero { padding:20px; border-radius:20px; }
  .public-hero-badge { display:none; }
  .public-reward-grid { display:flex; grid-template-columns:none; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 12px 12px 2px; overscroll-behavior-inline:contain; }
  .public-reward-card { flex:0 0 calc(100% - 18px); scroll-snap-align:start; }
  .public-reward-image { aspect-ratio:16/11; }
  .public-ranking-row { grid-template-columns:40px 42px minmax(0,1fr); padding:11px 10px; gap:8px; }
  .public-rank-xp { grid-column:3; justify-self:start; font-size:14px; margin-top:-3px; }
  .public-profile-hero { align-items:flex-start; padding:20px; }
  .public-profile-avatar { width:82px; height:82px; font-size:30px; }
  .public-achievement-grid { grid-template-columns:1fr; }
  .public-footer .wrap { align-items:flex-start; flex-direction:column; justify-content:center; padding:16px 0; }
}
.topbar-actions { display:flex; align-items:center; gap:8px; }
@media (max-width:640px) { .topbar-actions { width:100%; } .topbar-actions .text-link { flex:1; justify-content:center; } }

/* V12.6.8 · Subida de imágenes de recompensas */
.reward-image-field {
  display: grid;
  gap: 10px;
  align-content: start;
}
.reward-image-field > label > small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 500;
}
.reward-image-current {
  display: grid;
  grid-template-columns: 88px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
}
.reward-image-current img {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
}
.reward-image-remove {
  display: flex;
  grid-template-columns: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  font-size: 12px;
}
.reward-image-remove input {
  width: 17px;
  height: 17px;
  min-height: auto;
  flex: 0 0 auto;
  accent-color: var(--danger);
}
.admin-reward-thumb {
  width: 58px;
  height: 44px;
  display: block;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.admin-reward-thumb-empty {
  display: grid;
  place-items: center;
  font-size: 20px;
}
@media (max-width: 640px) {
  .reward-image-current { grid-template-columns: 72px minmax(0,1fr); }
  .reward-image-current img { width:72px; height:56px; }
}

/* Aviso de lanzamiento beta: visible en portal y área pública */
.beta-notice {
  margin: 16px 0 22px;
  padding: 14px 18px;
  border: 1px solid #e7be5f;
  border-left: 5px solid #d39b22;
  border-radius: 12px;
  background: #fff8e7;
  color: #654814;
  line-height: 1.55;
  font-size: 14px;
}
.beta-notice-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.beta-notice p { margin: 0; }
.beta-notice strong { font-weight: 700; }
@media (max-width: 640px) { .beta-notice { padding: 12px 14px; } }