/* ============================================================
   components.css — Botones, tarjetas, badges, tablas, forms
   ============================================================ */

/* ── PASE DE LISTA: toggle de modo (Lista detallada / Modo rápido) ── */
.attn-mode-toggle { display:inline-flex; gap:4px; background:var(--surface2,#EAEFE6); border:1px solid var(--border,#DDE4D7); border-radius:11px; padding:4px; margin-top:6px; }
.attn-mode-btn { display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; color:var(--muted,#5F6B5C); font-family:inherit; font-weight:700; font-size:13px; padding:8px 16px; border-radius:8px; cursor:pointer; }
.attn-mode-btn.active { background:var(--surface,#fff); color:var(--g,#146C43); box-shadow:0 1px 2px rgba(16,38,26,.08); }
.attn-lista-list { display:flex; flex-direction:column; gap:10px; }

/* ── PASE DE LISTA RÁPIDO (búsqueda + panel En vivo) ── */
.attn-quick-layout { display:grid; grid-template-columns:1fr 330px; gap:18px; align-items:start; margin-top:16px; }
.attn-quick-main { min-width:0; }
.attn-search-card { background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:18px; padding:20px 22px; box-shadow:0 1px 2px rgba(16,38,26,.05); margin-bottom:16px; }
.attn-search-hd { display:flex; align-items:center; gap:12px; }
.attn-search-ico { width:38px; height:38px; border-radius:11px; background:var(--gl,#EAF3EE); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.attn-search-ico .msym { font-size:22px; color:var(--g,#146C43); }
.attn-search-title { font-weight:800; font-size:17px; letter-spacing:-.01em; }
.attn-search-sub { font-size:13px; color:var(--muted,#5F6B5C); }
.attn-search-box { display:flex; align-items:center; gap:11px; background:var(--surface2,#F6F8F3); border:1.5px solid var(--border,#DDE4D7); border-radius:14px; padding:0 16px; margin-top:14px; }
.attn-search-box .msym { font-size:24px; color:var(--g,#146C43); }
.attn-search-box input { flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:17px; font-weight:700; padding:15px 0; color:var(--text,#18211A); }

.aq-results-lbl { font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#9AA796; margin:0 2px 9px; }
.aq-results { display:flex; flex-direction:column; gap:8px; }
.aq-row { display:flex; align-items:center; gap:13px; background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:14px; padding:11px 13px; flex-wrap:wrap; }
.aq-avatar { width:44px; height:44px; border-radius:50%; background:#10261A; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; }
.aq-row-info { flex:1; min-width:120px; }
.aq-row-name { font-weight:800; font-size:15px; cursor:pointer; }
.aq-row-name:hover { color:var(--g,#146C43); text-decoration:underline; }
.aq-row-sub { font-size:12.5px; color:var(--muted,#5F6B5C); }
.aq-row-actions { display:flex; gap:6px; flex-shrink:0; }
.aq-mark { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border,#DDE4D7); background:var(--surface,#fff); color:var(--muted,#5F6B5C); border-radius:11px; padding:9px 12px; font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer; transition:all .12s; }
.aq-mark .msym { font-size:19px; }
.aq-mark .aq-mark-lbl { display:inline; }
.aq-mark:hover { border-color:#bcc6b6; }
.aq-mark.aq-st-present.on { background:var(--g,#146C43); border-color:var(--g,#146C43); color:#fff; }
.aq-mark.aq-st-absent.on  { background:#C23535; border-color:#C23535; color:#fff; }
.aq-mark.aq-st-late.on    { background:#B5740B; border-color:#B5740B; color:#fff; }

.aq-empty { text-align:center; padding:40px 24px; border:1px dashed var(--border,#DDE4D7); border-radius:16px; background:var(--surface2,#FBFCFA); }
.aq-empty-ico { width:56px; height:56px; border-radius:16px; background:var(--gl,#EAF3EE); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.aq-empty-ico .msym { font-size:30px; color:var(--g,#146C43); }
.aq-empty-t { font-weight:800; font-size:16px; margin-bottom:4px; }
.aq-empty-s { font-size:13px; color:var(--muted,#5F6B5C); max-width:360px; margin:0 auto; line-height:1.5; }

.attn-live { position:sticky; top:84px; display:flex; flex-direction:column; gap:14px; }
.attn-live-card { background:var(--hero-grad,linear-gradient(150deg,#10261A,#1A4630)); border-radius:18px; padding:20px; color:#fff; }
.attn-live-tag { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; opacity:.78; margin-bottom:10px; }
.attn-live-dot { width:8px; height:8px; border-radius:50%; background:#3BD17E; display:inline-block; }
.attn-live-big { font-size:40px; font-weight:800; line-height:1; }
.attn-live-biglbl { font-size:12px; opacity:.75; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.attn-live-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.attn-live-n { font-size:22px; font-weight:800; }
.attn-live-n.attn-live-absent { color:#FF8E8E; }
.attn-live-n.attn-live-late { color:#FFC56B; }
.attn-live-l { font-size:10.5px; opacity:.7; text-transform:uppercase; letter-spacing:.04em; }
.attn-live-prog { margin-top:16px; }
.attn-live-prog-top { display:flex; justify-content:space-between; font-size:12px; font-weight:700; opacity:.85; margin-bottom:6px; }
.attn-live-bar { height:7px; background:rgba(255,255,255,.18); border-radius:99px; overflow:hidden; }
.attn-live-bar > div { height:100%; background:#3BD17E; border-radius:99px; transition:width .2s; }
.attn-live-prog-txt { font-size:11px; opacity:.7; text-align:right; margin-top:5px; }

/* Notas de la sesión — tarjeta alineada al panel En vivo */
.attn-notes { background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:18px; padding:16px 18px; box-shadow:0 1px 2px rgba(16,38,26,.05); }
.attn-notes-lbl { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted,#5F6B5C); margin-bottom:10px; }
.attn-notes-lbl .msym { font-size:17px; color:var(--g,#146C43); }
.attn-notes textarea { display:block; width:100%; box-sizing:border-box; border:1.5px solid var(--border,#DDE4D7); border-radius:12px; background:var(--surface2,#F6F8F3); padding:11px 13px; font-family:inherit; font-size:13.5px; font-weight:600; line-height:1.5; color:var(--text,#18211A); resize:vertical; min-height:76px; outline:none; transition:border-color .15s, background .15s; }
.attn-notes textarea::placeholder { color:#9AA796; font-weight:500; }
.attn-notes textarea:focus { border-color:var(--g,#146C43); background:var(--surface,#fff); box-shadow:0 0 0 3px rgba(20,108,67,.10); }

@media (max-width:900px) {
  .attn-quick-layout { grid-template-columns:1fr; }
  .attn-live { position:static; }
  .aq-mark .aq-mark-lbl { display:none; }
}


/* ── BUTTONS ── */
.btn-primary {
  background: var(--g);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  transition: background 0.14s;
}

.btn-primary:hover { background: var(--g3); }

.btn-ghost {
  background: var(--surface);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  transition: border-color 0.14s;
}

.btn-ghost:hover { border-color: var(--muted); }

.btn-danger {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  transition: background 0.14s;
}

.btn-danger:hover { background: var(--red-2); }

.edit-field {
   background: var(--surface);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  transition: border-color 0.14s;
}

.edit-field:hover { border-color: var(--muted); }


.btn-inline {
  font-size: 9px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--g);
  background: var(--gl);
  color: var(--g);
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  transition: background 0.12s;
}

.btn-inline:hover { background: var(--g-hover); }

/* ── CARD ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.card-title {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* ── STAT CARDS ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}

.stat-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.stat-val {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 3px;
}

.stat-change {
  font-size: 9px;
  color: var(--muted);
}

/* ── BADGES ── */
.badge {
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
}

.badge-g    { background: var(--gl);     color: var(--g); }
.badge-y    { background: var(--gold-l); color: var(--gold); }
.badge-r    { background: var(--red-l);  color: var(--red); }
.badge-b    { background: var(--blue-l); color: var(--blue); }
.badge-muted{ background: var(--surface2); color: var(--muted); }

/* ── AVATAR ── */
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #10261A;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
  border: 1px solid rgba(26, 122, 74, 0.20);
}

/* ── TABLE ── */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* Scroll horizontal en tablet/móvil en vez de recortar tablas anchas
     (Pagos 8 col, Socios 7 col) entre 761–900px. */
  overflow-x: auto;
  overflow-y: visible;
  box-shadow: var(--shadow-card);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.table td {
  font-size: 11px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface2);
  vertical-align: middle;
}

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

.table tbody tr:hover td {
  background: var(--gl);
}

.pos-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  font-size: 9px;
  font-weight: 700;
  background: var(--blue-l);
  color: var(--blue);
}

/* ── LIST ROWS ── */
.list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--surface2);
}

.list-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.lr-name { font-size: 11px; font-weight: 500; line-height: 1.2; }
.lr-sub  { font-size: 9px; color: var(--muted); margin-top: 1px; }

/* ── FILTER PILLS ── */
.filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.pill {
  padding: 5px 13px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font);
  transition: all 0.13s;
}

.pill:hover { border-color: var(--g); color: var(--g); }
.pill.active { background: var(--g); color: #fff; border-color: var(--g); }

/* ── SEARCH BAR ── */
.search-bar {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
}

.search-inp {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  font-size: 11px;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.13s;
}

.search-inp:focus { border-color: var(--g); }

/* ── BAR CHART ── */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 120px;
  overflow: hidden;
}

.bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 1;
  height: 100%;
  min-width: 0;
}

.bar {
  border-radius: 3px 3px 0 0;
  width: 100%;
  flex-shrink: 0;
  transition: opacity 0.13s;
}

.bar:hover { opacity: 0.75; }
.bar-lbl {
  font-size: 10px;
  line-height: 14px;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── DONUT CHART ── */
.donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
}

.donut {
  position: relative;
  width: 76px;
  height: 76px;
}

.donut svg { transform: rotate(-90deg); }

.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donut-pct  { font-size: 16px; font-weight: 600; color: var(--g); }
.donut-sub  { font-size: 7px; color: var(--muted); }

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.dl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--text2);
}

.dl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── TIMELINE / ACTIVITY ── */
.timeline { padding-left: 4px; }

.tl-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding-bottom: 10px;
  position: relative;
}

.tl-item:last-child { padding-bottom: 0; }

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

.tl-line {
  position: absolute;
  left: 3px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.tl-text  { font-size: 10px; color: var(--text2); line-height: 1.45; }
.tl-time  { font-size: 8px; color: var(--muted); margin-top: 2px; }

/* ── PAY SUMMARY CARDS ── */
.pay-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 16px;
}

.pay-card {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid;
}

.pay-card.green  { background: var(--gl);     border-color: rgba(26, 122, 74, 0.20); }
.pay-card.yellow { background: var(--gold-l); border-color: rgba(212, 135, 10, 0.20); }
.pay-card.red    { background: var(--red-l);  border-color: rgba(217, 64, 64, 0.20); }

.pc-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pay-card.green .pc-label  { color: var(--g); }
.pay-card.yellow .pc-label { color: var(--gold); }
.pay-card.red .pc-label    { color: var(--red); }

.pc-val { font-size: 26px; font-weight: 300; line-height: 1; }

.pay-card.green .pc-val  { color: var(--g); }
.pay-card.yellow .pc-val { color: var(--gold); }
.pay-card.red .pc-val    { color: var(--red); }

/* ── AVISO CARDS ── */

.aviso-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 18px;
  border-left: 6px solid transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  position: relative;
  transition: box-shadow .15s, transform .15s;
}


.aviso-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}


/* ----- Colores por tipo ----- */
.aviso-card.importante   { border-left-color: var(--red); }
.aviso-card.recordatorio { border-left-color: var(--gold); }
.aviso-card.informativo  { border-left-color: var(--blue); }



/* ----- Header (tag + fecha) ----- */
.aviso-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--muted);
}


.aviso-tag span {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 9px;
}


.aviso-card.importante .aviso-tag span {
  background: var(--red-l);
  color: var(--red);
}

.aviso-card.recordatorio .aviso-tag span {
  background: var(--gold-l);
  color: var(--gold);
}

.aviso-card.informativo .aviso-tag span {
  background: var(--blue-l);
  color: var(--blue);
}



/* ----- Título ----- */
.aviso-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.35;
}



/* ----- Contenido ----- */
.aviso-body {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 16px;
  white-space: pre-line;
}



/* ----- Footer ----- */
.aviso-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}



/* ----- Acciones ----- */
.aviso-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity .15s;
}



.aviso-card:hover .aviso-actions {
  opacity: 1;
}



.aviso-actions button {
  border: none;
  background: var(--surface2);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  color: var(--text2);
}




.aviso-card.imp   { border-left-color: var(--g); }
.aviso-card.info  { border-left-color: var(--blue); }
.aviso-card.alert { border-left-color: var(--gold); }

.av-tag {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.aviso-card.imp .av-tag   { color: var(--g); }
.aviso-card.info .av-tag  { color: var(--blue); }
.aviso-card.alert .av-tag { color: var(--gold); }

.av-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

.av-body {
  font-size: 10px;
  color: var(--text2);
  line-height: 1.55;
  margin-bottom: 8px;
}

.av-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.av-date  { font-size: 9px; color: var(--muted); }
.av-chips { display: flex; gap: 5px; }

/* ── SETTINGS FORM ROWS ── */
.settings-card { margin-bottom: 10px; }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.settings-field-label {
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 3px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.settings-field-val {
  font-size: 12px;
  font-weight: 500;
}

/* ── PLACEHOLDER EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: 52px 20px;
}

.empty-state-icon { font-size: 36px; margin-bottom: 12px; }
.empty-state-title { font-weight: 600; margin-bottom: 6px; }
.empty-state-body  { color: var(--muted); font-size: 12px; line-height: 1.5; max-width: 340px; margin: 0 auto; }

/* ── TABLE FOOTER ── */
.table-footer {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  margin-top: 9px;
}

.table-footer a {
  color: var(--g);
  cursor: pointer;
  text-decoration: none;
}


/* ── FORMS ── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.field label,
.form-grid label {
  display: block;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 5px;
  font-weight: 600;
}

.field input,
.field select,
.form-grid input,
.form-grid select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11px;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  outline: none;
}

.field input:focus,
.field select:focus,
.form-grid input:focus,
.form-grid select:focus {
  border-color: var(--g);
}

.mt {
  margin-top: 14px;
}

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

/* ── MODAL ── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;              /* 👈 OCULTO POR DEFECTO */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}


.modal-backdrop.active {
  display: flex;              /* 👈 SE MUESTRA AQUÍ */
}


.modal {
  width: 100%;
  max-width: 620px;
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-app);
  padding: 20px;
}

.modal-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
}

.modal-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.modal-close {
  border: none;
  background: var(--surface2);
  color: var(--text2);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
}

.modal-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* ── DASHBOARD LAYOUT ── */
.dashboard-grid-main {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 14px;
  margin-bottom: 16px;
}

.dashboard-grid-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

/* ── BADGE ámbar (borrador / pendiente) ── */
.badge-amber {
  background: var(--gold-l);
  color: #92400e;
}

/* ── MODAL "Nuevo/Editar grupo" (rediseño UX) ── */
.gform-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
  max-height: 70vh;
  overflow: auto;
}
.gform-sec {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface, #fff);
}
.gform-sec-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1f2937);
  margin-bottom: 12px;
}
.gform-sec-hd .msym { font-size: 18px; color: var(--g); }
.gform-help { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.gform-field { display: flex; flex-direction: column; gap: 5px; }
.gform-field + .gform-field, .gform-field + .gform-row2 { margin-top: 12px; }
.gform-field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.gform-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gform-horarios { display: flex; flex-direction: column; gap: 8px; }
.gform-add { margin-top: 10px; }
.gform-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  background: var(--surface2, #f8f9fb);
}
.gform-checklist label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  cursor: pointer;
  padding: 7px 8px;
  border-radius: 8px;
}
.gform-checklist label:hover { background: rgba(0,0,0,.04); }
.gform-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2, #f8f9fb);
}
.gform-toggle input { margin-top: 2px; }
.gform-toggle .muted { font-size: 12px; }
.gform-actions {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
/* Fila de horario como mini-tarjeta */
.grupo-horario-row {
  background: var(--surface2, #f8f9fb);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}

/* ── HUB de grupos del torneo (socio/invitado) ── */
.hub-cost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface2, #f6f7f9);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 0 10px;
}
.hub-cost-big { font-size: 20px; font-weight: 800; line-height: 1.1; }
.hub-guide {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--blue-l);
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 9px 11px;
  margin-bottom: 8px;
}
.hub-comments {
  font-size: 12px;
  color: var(--text, #1f2937);
  background: var(--gold-l,#fffbeb);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 6px 9px;
  margin-top: 6px;
}

/* ── DASHBOARD DONUT ── */
.dashboard-donut {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: conic-gradient(
    var(--g) 0deg 295deg,
    var(--gold) 295deg 340deg,
    var(--red) 340deg 360deg
  );
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-donut::after {
  content: '';
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--surface);
}

.dashboard-donut-center {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* ── ACTIVITY COLORS ── */
.activity-dot.green { background: var(--g); }
.activity-dot.gold { background: var(--gold); }
.activity-dot.red { background: var(--red); }
.activity-dot.blue { background: var(--blue); }

@media (max-width: 900px) {
  .stat-grid,
  .dashboard-grid-main,
  .dashboard-grid-bottom {
    grid-template-columns: 1fr;
  }
}

/* ── SOCIOS SUMMARY ── */
.socios-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}

.mini-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  box-shadow: var(--shadow-card);
}

.mini-stat-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

.mini-stat-value {
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: var(--text);
}

.mini-stat.green .mini-stat-value {
  color: var(--g);
}

.mini-stat.gold .mini-stat-value {
  color: var(--gold);
}

.mini-stat.muted .mini-stat-value {
  color: var(--muted);
}

/* ── FORM HELPERS ── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.field label,
.form-grid label {
  display: block;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 5px;
  font-weight: 600;
}

.field input,
.field select,
.form-grid input,
.form-grid select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11px;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  outline: none;
}

.field input:focus,
.field select:focus,
.form-grid input:focus,
.form-grid select:focus {
  border-color: var(--g);
}

.mt {
  margin-top: 14px;
}

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

/* ── MODAL ── */
/* z-index 1000 (antes 100): esta definición duplicada pisaba a la de arriba y
   dejaba los modales DEBAJO del bottom-nav móvil (800) y del topbar sticky (700). */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 38, 26, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;            /* móvil: permite scroll si el modal es alto */
}

.modal-backdrop.active {
  display: flex;
}

.modal {
  width: 100%;
  max-width: 620px;
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-app);
  padding: 20px;
  /* Nunca más alto que el viewport: scroll interno para no recortar botones en
     móvil. Los modales con su propio body scrollable (gform-body, etc.) siguen
     funcionando dentro de este límite. */
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

.modal-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
}

.modal-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.modal-close {
  border: none;
  background: var(--surface2);
  color: var(--text2);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
}

.modal-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* ── SOCIO ACTIONS ── */
.row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.btn-mini {
  font-size: 9px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font);
}

.btn-mini:hover {
  border-color: var(--g);
  color: var(--g);
}

@media (max-width: 900px) {
  .socios-summary,
  .form-grid {
    grid-template-columns: 1fr;
  }
}
/* ── Instancias (Admin): grid de tarjetas ─────────────────────────────────── */
.inst-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.inst-card { background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:18px; padding:18px; box-shadow:0 1px 2px rgba(16,38,26,.05); display:flex; flex-direction:column; gap:14px; }
.inst-card-active { border-color:var(--g,#146C43); box-shadow:0 0 0 2px rgba(20,108,67,.18), 0 1px 2px rgba(16,38,26,.05); }
.inst-card-top { display:flex; align-items:center; gap:12px; }
.inst-logo { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; flex-shrink:0; }
.inst-card-id { min-width:0; }
.inst-card-name { font-weight:800; font-size:16.5px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inst-card-sub { font-size:12.5px; color:var(--muted,#5F6B5C); margin-top:2px; }
.inst-card-actions { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.inst-card-actions .btn-sm { font-size:12.5px; padding:8px 12px; }

.inst-active-banner { display:flex; align-items:center; gap:9px; background:var(--gl,rgba(20,108,67,.10)); border:1px solid var(--g,#146C43); border-radius:12px; padding:10px 14px; margin-bottom:16px; font-size:13.5px; font-weight:700; color:var(--text2,#3C463B); }
.inst-active-banner .ambito-clear { margin-left:auto; }

/* ── RBAC por instancia (módulos/roles/permisos) ──────────────────────────── */
.rbac-section { padding:16px 0; border-top:1px solid var(--border,#DDE4D7); }
.rbac-section:first-child { border-top:none; padding-top:0; }
.rbac-h { font-weight:800; font-size:15px; letter-spacing:-.01em; margin-bottom:2px; }
.rbac-sub { font-size:12.5px; color:var(--muted,#5F6B5C); margin-bottom:12px; }
.rbac-mini { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted,#5F6B5C); margin-bottom:8px; }
.rbac-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
.rbac-toggle { display:flex; align-items:center; gap:8px; border:1px solid var(--border,#DDE4D7); border-radius:11px; padding:9px 12px; cursor:pointer; background:var(--surface,#fff); }
.rbac-toggle.on { border-color:var(--g,#146C43); background:var(--gl,rgba(20,108,67,.10)); }
.rbac-toggle-name { flex:1; font-size:13px; font-weight:700; color:var(--text,#18211A); }
.rbac-toggle input { display:none; }
.rbac-switch { width:34px; height:20px; border-radius:99px; background:#cdd6c8; position:relative; flex-shrink:0; transition:background .15s; }
.rbac-switch::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--surface,#fff); transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.rbac-toggle.on .rbac-switch { background:var(--g,#146C43); }
.rbac-toggle.on .rbac-switch::after { transform:translateX(14px); }
/* Feedback inmediato desde el propio checkbox, sin depender del re-render.
   (input va antes de .rbac-switch en el DOM → hermano general). */
.rbac-toggle input:checked ~ .rbac-switch { background:var(--g,#146C43); }
.rbac-toggle input:checked ~ .rbac-switch::after { transform:translateX(14px); }
.rbac-toggle:has(input:checked) { border-color:var(--g,#146C43); background:var(--gl,rgba(20,108,67,.10)); }
.rbac-matrix-wrap { overflow-x:auto; border:1px solid var(--border,#DDE4D7); border-radius:12px; }
.rbac-matrix { width:100%; border-collapse:collapse; font-size:13px; }
.rbac-matrix th { background:var(--surface2,#F6F8F3); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#5F6B5C); padding:9px 10px; position:sticky; top:0; }
.rbac-matrix td { padding:8px 10px; border-top:1px solid var(--border,#DDE4D7); }
.rbac-matrix tr.rbac-grp td { background:var(--gl,#EAF3EE); font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--g3,#0B5132); }
.rbac-matrix input { width:17px; height:17px; accent-color:var(--g,#146C43); cursor:pointer; }
.rbac-matrix td.rbac-danger-cell { background:var(--wine-bg,rgba(179,38,30,.10)); box-shadow:inset 0 0 0 1px var(--wine,#B3261E); }
.rbac-matrix td.rbac-danger-cell input { accent-color:var(--wine,#B3261E); }
.rbac-perm-search { display:block; }
.rbac-warn { cursor:help; }
.rbac-actions { display:flex; justify-content:flex-end; padding-top:16px; border-top:1px solid var(--border,#DDE4D7); }

/* ── RBAC v2: patrón "Roles y módulos" (niveles + tarjetas) ─────────────────── */
.rbac-dot { width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }
.rbac-toggle-role .rbac-toggle-name { display:flex; align-items:center; gap:8px; }

/* Encabezado colapsable + mapa de roles */
.rbac-collap { display:flex; align-items:center; cursor:pointer; user-select:none; }
.rbac-h-chev { margin-left:6px; color:var(--muted,#5F6B5C); font-size:20px; }
.rbac-rolemap { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:10px; margin-top:10px; }
.rbac-rolecard { background:var(--surface2,#F6F8F3); border:1px solid var(--border,#DDE4D7); border-left:4px solid var(--g,#146C43); border-radius:12px; padding:12px 14px; }
.rbac-rolename { display:flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; color:var(--text,#18211A); }
.rbac-roleline { font-size:12px; color:var(--muted,#5F6B5C); margin-top:5px; line-height:1.45; }

/* Leyenda de niveles */
.rbac-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 12px; }
.rbac-legchip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--text2,#3C463B); cursor:help; }
.rbac-legdot { width:10px; height:10px; border-radius:50%; }
.rbac-legdot-0 { background:#C6D0C0; }
.rbac-legdot-1 { background:#8AA0B8; }
.rbac-legdot-2 { background:var(--g,#146C43); }
.rbac-legdot-3 { background:#6B1D3D; }

/* Tarjetas de módulo */
.rbac-modcards { display:flex; flex-direction:column; gap:10px; }
.rbac-modcard { border:1px solid var(--border,#DDE4D7); border-radius:14px; background:var(--surface,#fff); overflow:hidden; }
.rbac-modcard.open { border-color:var(--g,#146C43); box-shadow:0 0 0 1px rgba(20,108,67,.10); }
.rbac-modhd { display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer; }
.rbac-modicon { font-size:22px; color:var(--g,#146C43); flex:none; }
.rbac-modtitle { min-width:0; }
.rbac-modname { font-weight:800; font-size:14.5px; letter-spacing:-.01em; }
.rbac-modmeta { font-size:11.5px; color:var(--muted,#5F6B5C); margin-top:1px; }
.rbac-modpills { display:flex; gap:5px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; max-width:52%; }
.rbac-rpill { display:inline-flex; align-items:center; font:700 10.5px/1 var(--font,Manrope,sans-serif); padding:4px 9px; border-radius:999px; white-space:nowrap; }
.rbac-modchev { color:var(--muted,#5F6B5C); margin-left:4px; flex:none; }
.rbac-modbody { padding:2px 15px 15px; border-top:1px solid var(--border,#DDE4D7); }

/* Filas de nivel (control segmentado) */
.rbac-lvlrow { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed var(--border,#DDE4D7); flex-wrap:wrap; }
.rbac-lvlrow:last-child { border-bottom:none; }
.rbac-role { display:flex; align-items:center; gap:8px; min-width:130px; font-weight:700; font-size:13px; color:var(--text,#18211A); }
.rbac-cust { font:800 9px/1 var(--font,Manrope,sans-serif); text-transform:uppercase; letter-spacing:.05em; color:#8A5A2B; background:rgba(138,90,43,.12); padding:3px 6px; border-radius:999px; cursor:help; }
.rbac-segwrap { display:inline-flex; gap:4px; background:var(--surface2,#F6F8F3); padding:4px; border-radius:10px; flex-wrap:wrap; }
.rbac-seg { border:none; cursor:pointer; font:700 12px var(--font,Manrope,sans-serif); padding:6px 12px; border-radius:8px; white-space:nowrap; transition:.12s; background:transparent; color:var(--text2,#3C463B); }
.rbac-seg:hover { background:var(--gl,rgba(20,108,67,.10)); }
.rbac-seg.on { background:var(--g,#146C43); color:#fff; }
.rbac-seg.on:hover { background:var(--g,#146C43); }

/* Avanzado: matriz permiso por permiso */
.rbac-advtoggle { margin-top:12px; border:1px dashed var(--border,#C6D0C0); background:transparent; color:var(--g,#146C43); font:700 12.5px var(--font,Manrope,sans-serif); padding:8px 12px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.rbac-advtoggle:hover { background:var(--gl,rgba(20,108,67,.08)); }
.rbac-advtoggle .msym { font-size:17px; }
.rbac-adv { margin-top:10px; border:1px solid var(--border,#DDE4D7); border-radius:12px; overflow:hidden; }
.rbac-prow { display:flex; align-items:center; padding:8px 12px; border-top:1px solid var(--border,#DDE4D7); }
.rbac-prow:first-child { border-top:none; }
.rbac-prow.rbac-mhead { background:var(--surface2,#F6F8F3); padding-top:9px; padding-bottom:9px; }
.rbac-plabel { flex:1; display:flex; align-items:center; gap:9px; min-width:0; font-size:13px; color:var(--text,#18211A); }
.rbac-plabeltxt { min-width:0; }
.rbac-tier { font:800 9.5px/1 var(--font,Manrope,sans-serif); letter-spacing:.03em; text-transform:uppercase; padding:3px 7px; border-radius:999px; flex:none; cursor:help; }
.rbac-mh { width:84px; flex:none; text-align:center; font:800 10.5px/1 var(--font,Manrope,sans-serif); letter-spacing:.03em; text-transform:uppercase; }
.rbac-cell { width:84px; flex:none; display:flex; justify-content:center; }
.rbac-box { width:22px; height:22px; border-radius:6px; border:1px solid var(--border,#C6D0C0); background:var(--surface,#fff); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:.12s; }
.rbac-box .msym { font-size:15px; color:transparent; }
.rbac-box.on { background:var(--g,#146C43); border-color:var(--g,#146C43); }
.rbac-box.on .msym { color:#fff; }
.rbac-box.danger { background:var(--wine,#B3261E); border-color:var(--wine,#B3261E); box-shadow:0 0 0 2px var(--wine-bg,rgba(179,38,30,.18)); }
.rbac-nomatch { font-size:12.5px; color:var(--muted,#5F6B5C); padding:12px 2px; }

/* Tarjeta de módulo apagado (sin permisos que configurar) */
.rbac-modcard-off { background:var(--surface2,#F6F8F3); border-style:dashed; }
.rbac-modcard-off .rbac-modname { color:var(--muted,#5F6B5C); }
.rbac-offchip { display:inline-block; font:800 9.5px/1 var(--font,Manrope,sans-serif); text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#5F6B5C); background:var(--border,#E3E9DE); padding:3px 7px; border-radius:999px; vertical-align:2px; margin-left:4px; }
.rbac-modoff-note { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:0 15px 14px; font-size:12.5px; color:var(--muted,#5F6B5C); line-height:1.5; }
.rbac-enable-btn { margin-left:auto; border:1px solid var(--g,#146C43); background:transparent; color:var(--g,#146C43); font:700 12.5px var(--font,Manrope,sans-serif); padding:7px 12px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.rbac-enable-btn:hover { background:var(--gl,rgba(20,108,67,.10)); }
.rbac-enable-btn .msym { font-size:18px; }

/* ── Chips de rol multirol (detalle de socio) ──────────────────────────────── */
.rol-chips { display:flex; flex-wrap:wrap; gap:7px; }
.rol-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border,#DDE4D7); background:var(--surface,#fff); border-radius:999px; padding:4px 6px 4px 5px; font-size:12.5px; font-weight:700; color:var(--text,#18211A); }
.rol-chip.primary { border-color:var(--g,#146C43); background:var(--gl,rgba(20,108,67,.10)); }
.rol-chip-lbl { padding:0 2px; }
.rol-chip-tag { font:800 8.5px/1 var(--font,Manrope,sans-serif); text-transform:uppercase; letter-spacing:.04em; color:var(--g,#146C43); background:var(--surface,#fff); border:1px solid var(--g,#146C43); padding:3px 5px; border-radius:999px; }
.rol-chip-star { display:inline-flex; cursor:pointer; color:var(--muted,#9AA796); }
.rol-chip-star.on { color:var(--gold,#B5740B); }
.rol-chip-star .msym, .rol-chip-x .msym, .rol-chip-lock .msym { font-size:16px; }
.rol-chip-x { display:inline-flex; cursor:pointer; color:var(--muted,#5F6B5C); border-radius:50%; }
.rol-chip-x:hover { color:var(--red,#B3261E); background:var(--red-l,rgba(179,38,30,.10)); }
.rol-chip-lock { display:inline-flex; color:var(--muted,#9AA796); }
.rol-off-panel { border:1px dashed var(--border,#DDE4D7); border-radius:12px; padding:12px 14px; background:var(--surface2,#F6F8F3); }
.rol-off-hd { font-weight:800; font-size:12.5px; color:var(--text,#18211A); display:flex; align-items:center; gap:5px; }
.rol-off-txt { font-size:12px; color:var(--muted,#5F6B5C); margin-top:5px; line-height:1.5; }

/* Impresión: exportar el expediente/progreso a PDF sin el chrome de la app. */
@media print {
  .sidebar, #ambito-bar, .ambito-bar, .prog-controls, .modal-backdrop, .toast, #toast-root { display:none !important; }
  .content { padding:0 !important; margin:0 !important; }
  .page:not(.active) { display:none !important; }
  body, .content { background:#fff !important; }
  /* Modo "imprimir el documento del modal": solo se ve la hoja del PDF. */
  body.printing-doc * { visibility:hidden !important; }
  body.printing-doc #prog-doc-modal, body.printing-doc #prog-doc-modal * { visibility:visible !important; }
  body.printing-doc #prog-doc-modal { display:block !important; position:absolute; inset:0; background:#fff; }
  body.printing-doc #prog-doc-modal .modal-hd { display:none !important; }
  body.printing-doc #prog-doc-modal .prog-doc-scroll { overflow:visible !important; background:#fff !important; padding:0 !important; }
  body.printing-doc #prog-doc-modal .prog-doc-sheet { box-shadow:none !important; max-width:none !important; border-radius:0 !important; }
}

@media (max-width:720px){
  .rbac-modpills { max-width:100%; }
  .rbac-mh, .rbac-cell { width:64px; }
}

/* ── RBAC: vista previa por rol ────────────────────────────────────────────── */
.rbac-preview-note { font-size:12.5px; color:var(--muted,#5F6B5C); margin:14px 0 10px; }
.rbac-preview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.rbac-preview-card { border:1px solid var(--border,#DDE4D7); border-radius:14px; padding:14px; background:var(--surface2,#FBFCFA); }
.rbac-preview-role { font-weight:800; font-size:14px; color:var(--g3,#0B5132); margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border,#DDE4D7); }
.rbac-chips { display:flex; flex-wrap:wrap; gap:5px; }
.rbac-chip { display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--gl,rgba(20,108,67,.10)); color:var(--g3,#0B5132); }
.rbac-chip-perm { background:var(--surface2,#EEF2EA); color:var(--text2,#3C463B); font-weight:600; }

/* ── RBAC: mockup visual por rol (cómo se ve la app del club para cada rol) ─── */
.rbac-mock-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-top:6px; }
.rbac-mock { border:1px solid var(--border,#DDE4D7); border-radius:14px; overflow:hidden; background:var(--surface,#fff); box-shadow:0 1px 2px rgba(16,38,26,.05); }
.rbac-mock-frame { display:flex; height:210px; }
.rbac-mock-side { width:44%; background:#10261A; color:#fff; padding:11px 9px; overflow:hidden; }
.rbac-mock-brand { display:flex; align-items:center; gap:6px; font-weight:800; font-size:11px; margin-bottom:11px; }
.rbac-mock-brand img { height:16px; width:auto; max-width:70px; border-radius:3px; }
.rbac-mock-brand-nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rbac-mock-nav { display:flex; flex-direction:column; gap:3px; }
.rbac-mock-navitem { display:flex; align-items:center; gap:6px; font-size:9.5px; font-weight:700; opacity:.78; padding:4px 6px; border-radius:6px; white-space:nowrap; overflow:hidden; }
.rbac-mock-navitem .msym { font-size:13px; flex-shrink:0; }
.rbac-mock-main { flex:1; background:var(--bg,#EEF1EA); padding:10px; display:flex; flex-direction:column; }
.rbac-mock-topbar { height:9px; width:55%; background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:5px; margin-bottom:9px; }
.rbac-mock-hero { height:48px; border-radius:9px; margin-bottom:9px; }
.rbac-mock-cards { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.rbac-mock-cards > div { height:30px; background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:7px; }
.rbac-mock-cap { padding:11px 13px; border-top:1px solid var(--border,#DDE4D7); }
.rbac-mock-cap-role { font-weight:800; font-size:14px; }
.rbac-mock-cap-sub { font-size:11.5px; color:var(--muted,#5F6B5C); margin-top:2px; }

/* ── RBAC: explorar la app COMO un rol (interactivo) ──────────────────────── */
.rbac-mock-cap-open { font-size:11px; font-weight:800; color:var(--g,#146C43); margin-top:8px; }
.rbac-app { display:flex; height:520px; max-height:72vh; }
.rbac-app-side { width:230px; flex-shrink:0; background:#10261A; color:#fff; padding:16px 12px; overflow-y:auto; }
.rbac-app-brand { display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; margin-bottom:16px; padding:0 4px; }
.rbac-app-nav { display:flex; flex-direction:column; gap:3px; }
.rbac-app-navitem { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:none; background:transparent; color:rgba(255,255,255,.72); font-family:inherit; font-weight:600; font-size:13px; padding:9px 11px; border-radius:10px; cursor:pointer; transition:background .12s,color .12s; }
.rbac-app-navitem .msym { font-size:19px; }
.rbac-app-navitem:hover { background:rgba(255,255,255,.08); color:#fff; }
.rbac-app-navitem.active { background:rgba(255,255,255,.16); color:#fff; }
.rbac-app-main { flex:1; background:var(--bg,#EEF1EA); overflow-y:auto; }
.rbac-app-topbar { height:52px; background:var(--surface,#fff); border-bottom:1px solid var(--border,#DDE4D7); display:flex; align-items:center; padding:0 20px; }
.rbac-app-crumb { font-weight:800; font-size:15px; }
.rbac-app-hero { margin:18px 20px 0; border-radius:16px; padding:20px 22px; color:#fff; display:flex; align-items:center; gap:14px; }
.rbac-app-hero-ico { width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rbac-app-hero-ico .msym { font-size:24px; }
.rbac-app-hero-t { font-weight:800; font-size:18px; letter-spacing:-.01em; }
.rbac-app-hero-s { font-size:13px; opacity:.85; margin-top:2px; }
.rbac-app-section { margin:18px 20px; background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:14px; padding:16px 18px; }
.rbac-app-section-t { font-weight:800; font-size:13.5px; margin-bottom:10px; }
.rbac-app-perms { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.rbac-app-perms li { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text2,#3C463B); }
.rbac-app-perms li .msym { font-size:17px; color:var(--g,#146C43); }
.rbac-app-perms-empty { font-size:13px; color:var(--muted,#5F6B5C); }
@media (max-width:640px) { .rbac-app-side { width:160px; } .rbac-app { height:440px; } }

/* ── RBAC explorer: pantallas de ejemplo (datos no reales) ────────────────── */
.rs-screen { margin:18px 20px; background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:14px; padding:16px 18px; }
.rs-screen-t { font-weight:800; font-size:14px; margin-bottom:12px; }
.rs-screen > .rs-btn, .rs-screen > .rs-btn-ghost { margin-top:12px; }
.rs-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.rs-stat { background:var(--surface2,#F6F8F3); border:1px solid var(--border,#DDE4D7); border-radius:11px; padding:12px; text-align:center; }

/* ── Módulo Documentos → Cartas membretadas ─────────────────────────────── */
.subtabs { display:flex; gap:4px; border-bottom:1px solid var(--border,#DDE4D7); }
.subtab { border:none; background:transparent; padding:9px 14px; font:700 13.5px var(--font,Manrope,sans-serif); color:var(--text2,#5F6B5C); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-flex; align-items:center; gap:5px; }
.subtab:hover { color:var(--text,#18211A); }
.subtab.active { color:var(--g,#146C43); border-bottom-color:var(--g,#146C43); }

.carta-toolbar { display:flex; justify-content:flex-end; margin-bottom:14px; }
.carta-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.carta-card { display:flex; align-items:center; gap:12px; background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:13px; padding:13px 14px; }
.carta-card-ico { width:40px; height:40px; border-radius:10px; background:var(--gl,rgba(20,108,67,.10)); color:var(--g,#146C43); display:flex; align-items:center; justify-content:center; flex:none; }
.carta-card-ico .msym { font-size:22px; }
.carta-card-body { flex:1; min-width:0; }
.carta-card-title { font-weight:800; font-size:14px; color:var(--text,#18211A); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.carta-card-meta { font-size:12.5px; color:var(--text2,#5F6B5C); margin-top:2px; }
.carta-card-side { display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:none; }
.carta-pill { font:800 10px/1 var(--font,Manrope,sans-serif); text-transform:uppercase; letter-spacing:.04em; padding:4px 8px; border-radius:999px; }
.carta-pill.final { background:var(--gl,rgba(20,108,67,.12)); color:var(--g3,#0B5132); }
.carta-pill.draft { background:#F0EFEA; color:#7A8472; }
.carta-acts { display:flex; gap:4px; }
.carta-act { border:1px solid var(--border,#DDE4D7); background:var(--surface,#fff); width:30px; height:30px; border-radius:8px; cursor:pointer; color:var(--text2,#5F6B5C); display:inline-flex; align-items:center; justify-content:center; }
.carta-act .msym { font-size:18px; }
.carta-act:hover { border-color:var(--g,#146C43); color:var(--g,#146C43); }
.carta-act.danger:hover { border-color:var(--red,#C2342F); color:var(--red,#C2342F); }
.carta-empty { text-align:center; padding:44px 20px; color:var(--text2,#5F6B5C); }
.carta-empty .msym { font-size:44px; color:var(--g,#146C43); opacity:.8; }
.carta-empty-t { font-weight:800; font-size:16px; color:var(--text,#18211A); margin-top:8px; }
.carta-empty-s { font-size:13px; margin:4px 0 14px; }
.carta-hint { font-size:12.5px; color:var(--text2,#5F6B5C); }
.carta-mini { border:1px solid var(--border,#DDE4D7); background:var(--surface,#fff); border-radius:8px; padding:4px 9px; font:700 12px var(--font,Manrope,sans-serif); color:var(--g,#146C43); cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.carta-mini .msym { font-size:15px; }

/* Editor */
.modal.carta-editor { max-width:1040px; width:96vw; }
.carta-editor-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; padding:4px 2px; }
.carta-editor-form { display:flex; flex-direction:column; gap:12px; max-height:66vh; overflow:auto; padding-right:6px; }
.carta-fl { display:flex; flex-direction:column; gap:5px; font:700 12.5px var(--font,Manrope,sans-serif); color:var(--text,#18211A); }
.carta-frow { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; align-items:end; }
.carta-chk { display:inline-flex; align-items:center; gap:7px; font:600 13px var(--font,Manrope,sans-serif); color:var(--text,#18211A); cursor:pointer; }
.carta-signers-ed { border:1px solid var(--border,#DDE4D7); border-radius:11px; padding:11px; }
.carta-signers-hd { display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:13px; margin-bottom:8px; }
.carta-signer-row { display:grid; grid-template-columns:1fr 1fr auto; gap:7px; margin-bottom:7px; }
.carta-design { border:1px dashed var(--border,#C6D0C0); border-radius:11px; padding:10px 12px; }
.carta-design summary { font-weight:800; font-size:13px; cursor:pointer; color:var(--text,#18211A); }
.carta-design > * { margin-top:10px; }
.carta-editor-preview { background:var(--surface2,#F6F8F3); border:1px solid var(--border,#DDE4D7); border-radius:13px; padding:12px; max-height:66vh; overflow:auto; }
.carta-preview-cap { font-size:11.5px; color:var(--muted,#7A8472); text-align:center; margin-bottom:10px; }
.carta-preview-host .carta-doc-sheet { transform-origin:top center; }

/* Hoja del documento (membrete) — compartida por editor y modal PDF */
.carta-doc-sheet { background:#fff; color:#1a1a1a; max-width:640px; margin:0 auto; padding:44px 46px; box-shadow:0 2px 14px rgba(16,38,26,.10); border-radius:4px; font-family:Georgia,'Times New Roman',serif; display:flex; flex-direction:column; box-sizing:border-box; }
.carta-doc-top { display:block; }
.carta-doc-bottom { margin-top:auto; }   /* firma + pie anclados al final de la hoja */
.carta-logo-wrap { margin-bottom:8px; }
.carta-logo-wrap .carta-logo { margin-bottom:0; }
/* Bandas de encabezado/pie a ancho completo (sangran el padding de la hoja) */
.carta-band img { display:block; width:100%; height:auto; }
.carta-band-top { margin:-44px -46px 18px; }
.carta-band-bottom { margin:18px -46px -44px; }
/* Fila de subida de imagen (editor) + miniatura de vista previa */
.carta-img-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.carta-img-prev { width:96px; height:26px; object-fit:cover; border-radius:5px; border:1px solid var(--border,#DDE4D7); background:var(--surface2,#F6F8F3); }
.carta-img-prev.empty { display:none; }
.carta-head { margin-bottom:6px; }
.carta-logo { max-height:64px; max-width:200px; display:inline-block; margin-bottom:8px; }
.carta-org { font-size:20px; font-weight:800; color:var(--carta-accent,#146C43); font-family:var(--font,Manrope,sans-serif); }
.carta-headtext { font-size:12px; color:#666; margin-top:2px; font-family:var(--font,Manrope,sans-serif); }
.carta-rule { height:3px; background:var(--carta-accent,#146C43); border-radius:2px; margin:10px 0 20px; }
.carta-date { text-align:right; font-size:13px; color:#444; margin-bottom:18px; }
.carta-to { font-weight:700; font-size:14px; margin-bottom:14px; }
.carta-body { font-size:14px; line-height:1.7; white-space:pre-wrap; min-height:120px; text-align:justify; }
.carta-signs { display:flex; flex-wrap:wrap; gap:34px; justify-content:center; margin-top:52px; }
.carta-sign { text-align:center; min-width:180px; }
.carta-sign-line { border-top:1.4px solid #333; margin-bottom:6px; }
.carta-sign-name { font-weight:700; font-size:13px; }
.carta-sign-label { font-size:11.5px; color:#666; }
.carta-foot { margin-top:34px; padding-top:12px; border-top:1px solid #e3e3e3; font-size:11px; color:#888; text-align:center; font-family:var(--font,Manrope,sans-serif); }
.carta-cfg-body { display:flex; flex-direction:column; gap:11px; padding:4px 2px; }
.modal.carta-doc-wrap { max-width:760px; width:94vw; }
.carta-doc-scroll { max-height:74vh; overflow:auto; background:#eceee9; padding:22px; border-radius:0 0 14px 14px; }

@media (max-width:820px) { .carta-editor-grid { grid-template-columns:1fr; } .carta-editor-preview { display:none; } }

/* Impresión del PDF de la carta: solo la hoja del modal */
@media print {
  body.printing-carta * { visibility:hidden !important; }
  body.printing-carta #carta-doc-modal, body.printing-carta #carta-doc-modal * { visibility:visible !important; }
  body.printing-carta #carta-doc-modal { display:block !important; position:absolute; inset:0; background:#fff; }
  body.printing-carta #carta-doc-modal .modal-hd { display:none !important; }
  body.printing-carta #carta-doc-modal .carta-doc-scroll { overflow:visible !important; background:#fff !important; padding:0 !important; max-height:none !important; }
  /* La hoja ES la página: llena el papel, margen de documento por padding, firma/pie abajo. */
  body.printing-carta #carta-doc-modal .carta-doc-sheet { box-shadow:none !important; border-radius:0 !important; max-width:none !important; width:100% !important; min-height:100vh !important; margin:0 !important; padding:16mm 18mm !important; }
}

/* Pie de modal (botones alineados a la derecha). Antes solo existía vía estilos
   inline en cada modal; se formaliza para los modales de cartas y futuros. */
.modal-ft { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--border,#DDE4D7); }
.modal-ft .btn-primary, .modal-ft .btn-ghost { font-size:13px; padding:10px 16px; }
/* Íconos dentro de botones de la toolbar de cartas a tamaño consistente */
.carta-toolbar .btn-ghost .msym, .carta-empty .btn-primary .msym { font-size:17px; vertical-align:-3px; }

/* Pestañas del modal "Configurar instancia" (antes eran botones sin estilo) */
.cfg-tabs { display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--border,#DDE4D7); margin-bottom:18px; }
.cfg-tab-btn { display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; padding:10px 14px; font:700 13px var(--font,Manrope,sans-serif); color:var(--text2,#5F6B5C); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:8px 8px 0 0; transition:color .15s, background .15s; }
.cfg-tab-btn .msym { font-size:18px; }
.cfg-tab-btn:hover { color:var(--text,#18211A); background:var(--gl,rgba(20,108,67,.08)); }
.cfg-tab-btn.active { color:var(--g,#146C43); border-bottom-color:var(--g,#146C43); }

/* ── Banner del Inicio por instancia (D2) ────────────────────────────────── */
.home-banner { height: 128px; border-radius: 16px; background-size: cover; background-position: center;
  margin-bottom: 18px; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
@media (max-width: 640px) { .home-banner { height: 92px; } }

/* ── Menú de acciones "⋯" (B5) ────────────────────────────────────────────── */
.ovf { position: relative; display: inline-flex; }
.ovf-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 9px; cursor: pointer; color: var(--text2); }
.ovf-btn:hover { background: var(--surface2); }
.ovf-menu { position: absolute; top: calc(100% + 6px); min-width: 190px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow-pop, 0 8px 24px rgba(0,0,0,.18)); padding: 6px; z-index: 500; display: none; }
.ovf-menu.ovf-right { right: 0; } .ovf-menu.ovf-left { left: 0; }
.ovf-menu.open { display: block; }
.ovf-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none;
  padding: 8px 10px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer; }
.ovf-item:hover { background: var(--surface2); color: var(--text); }
.ovf-item .msym { font-size: 18px; }
.ovf-item.danger { color: var(--red); } .ovf-item.danger:hover { background: var(--red-l); }

/* Cartas membretadas: tamaños de papel, firma (sello/trazo), filas de firmante */
.carta-doc-sheet.carta-size-carta  { max-width:640px; min-height:828px; }
.carta-doc-sheet.carta-size-oficio { max-width:640px; min-height:1054px; }
.carta-doc-sheet.carta-size-a4     { max-width:620px; min-height:877px; }
.carta-logo-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.carta-sign-img { max-height:52px; max-width:180px; display:block; margin:0 auto 4px; }
.carta-sign-seal { display:inline-flex; align-items:center; gap:5px; color:var(--carta-accent,#146C43); font-family:var(--font,Manrope,sans-serif); font-weight:800; font-size:12px; border:1px solid var(--carta-accent,#146C43); border-radius:8px; padding:5px 10px; margin-bottom:6px; background:rgba(0,0,0,.02); }
.carta-sign-seal .msym { font-size:15px; }
.carta-sign-when { font-size:10.5px; color:#888; margin-top:2px; font-family:var(--font,Manrope,sans-serif); }
.carta-signer-row2 { border:1px solid var(--border,#DDE4D7); border-radius:10px; padding:9px; margin-bottom:8px; }
.carta-signer-inputs { display:grid; grid-template-columns:1fr 1fr auto; gap:7px; }
.carta-signer-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.carta-signed { display:inline-flex; align-items:center; gap:5px; font:800 12px var(--font,Manrope,sans-serif); color:var(--g,#146C43); }
.carta-signed .msym { font-size:16px; }

/* Banner del Inicio: chip de tamaño recomendado + control de posición de la imagen */
.banner-sizehint { display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,.42); color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:5px 10px; font:700 11.5px var(--font,Manrope,sans-serif); backdrop-filter:blur(3px); cursor:help; }
.banner-pos { position:absolute; right:10px; bottom:10px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:3px; background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.35); border-radius:12px; padding:5px; backdrop-filter:blur(3px); }
.banner-pos-mid { display:flex; gap:3px; }
.banner-pos button { width:28px; height:28px; border:none; background:rgba(255,255,255,.14); color:#fff; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.banner-pos button:hover { background:rgba(255,255,255,.28); }
.banner-pos .msym { font-size:18px; }

/* Documentos: toolbar de carpetas + búsqueda + paginación (organización a escala) */
.doc-toolbar { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.doc-search { display:flex; align-items:center; gap:8px; background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:11px; padding:8px 12px; max-width:420px; }
.doc-search .msym { color:var(--muted,#5F6B5C); font-size:20px; }
.doc-search input { flex:1; border:none; outline:none; background:transparent; font:600 14px var(--font,Manrope,sans-serif); color:var(--text,#18211A); }
.doc-search-clear { border:none; background:none; cursor:pointer; color:var(--muted,#5F6B5C); display:inline-flex; }
.doc-search-clear .msym { font-size:18px; }
.doc-folders { display:flex; gap:7px; flex-wrap:wrap; }
.doc-fchip { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border,#DDE4D7); background:var(--surface,#fff); color:var(--text2,#3C463B); border-radius:999px; padding:6px 12px; font:700 12.5px var(--font,Manrope,sans-serif); cursor:pointer; transition:all .14s; }
.doc-fchip:hover { border-color:var(--g,#146C43); color:var(--g,#146C43); }
.doc-fchip.active { background:var(--g,#146C43); border-color:var(--g,#146C43); color:#fff; }
.doc-fchip .doc-fcount { font-size:11px; opacity:.75; }
.doc-fchip.active .doc-fcount { opacity:.9; }
.doc-fchip .msym { font-size:16px; }
.doc-fnew { border-style:dashed; color:var(--g,#146C43); }
.doc-chip-folder { background:var(--gl,rgba(20,108,67,.10)); color:var(--g3,#0B5132); }
.doc-pager { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:16px; }
.doc-pgbtn { min-width:32px; height:32px; border:1px solid var(--border,#DDE4D7); background:var(--surface,#fff); color:var(--text2,#3C463B); border-radius:8px; cursor:pointer; font:700 13px var(--font,Manrope,sans-serif); padding:0 8px; }
.doc-pgbtn:hover:not(:disabled) { border-color:var(--g,#146C43); color:var(--g,#146C43); }
.doc-pgbtn.active { background:var(--g,#146C43); border-color:var(--g,#146C43); color:#fff; }
.doc-pgbtn:disabled { opacity:.45; cursor:not-allowed; }
.doc-pager-info { font-size:12.5px; color:var(--muted,#5F6B5C); margin-left:8px; }
/* Breadcrumb del árbol de carpetas + colores en el modal de carpeta */
.doc-crumbs { display:flex; align-items:center; gap:3px; flex-wrap:wrap; }
.doc-crumb { border:none; background:none; cursor:pointer; font:700 13px var(--font,Manrope,sans-serif); color:var(--text2,#3C463B); display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:8px; }
.doc-crumb:hover { background:var(--gl,rgba(20,108,67,.10)); color:var(--g,#146C43); }
.doc-crumb.active { color:var(--g,#146C43); }
.doc-crumb-sep { color:var(--muted,#5F6B5C); font-size:13px; }
.doc-crumbrow { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.doc-folder-actions { display:flex; gap:6px; }
.doc-fbtn { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border,#DDE4D7); background:var(--surface,#fff); color:var(--text2,#3C463B); border-radius:8px; padding:6px 10px; font:700 12.5px var(--font,Manrope,sans-serif); cursor:pointer; }
.doc-fbtn:hover { border-color:var(--g,#146C43); color:var(--g,#146C43); }
.doc-fbtn.danger:hover { border-color:var(--red,#C2342F); color:var(--red,#C2342F); background:var(--red-l,rgba(194,53,53,.10)); }
.doc-fbtn .msym { font-size:17px; }
/* Drag & drop de documentos a carpetas */
.doc-draggable { cursor:grab; }
.doc-draggable:active { cursor:grabbing; }
.doc-drag-handle { margin-left:auto; color:var(--muted,#5F6B5C); font-size:18px; cursor:grab; }
.doc-dragging { opacity:.5; }
.doc-fchip.doc-drop-hover, .doc-crumb.doc-drop-hover { outline:2px dashed var(--g,#146C43); outline-offset:2px; background:var(--gl,rgba(20,108,67,.12)) !important; color:var(--g,#146C43) !important; }
.doc-folder-colors { display:flex; gap:8px; flex-wrap:wrap; }
.docf-color { width:30px; height:30px; border-radius:8px; border:2px solid transparent; cursor:pointer; box-shadow:0 0 0 1px var(--border,#DDE4D7); display:inline-flex; align-items:center; justify-content:center; padding:0; }
.docf-color.active { border-color:var(--text,#18211A); box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 4px var(--text,#18211A); }
.docf-none { background:var(--surface2,#F6F8F3); color:var(--muted,#5F6B5C); }
/* Multi-selección: mover documentos en lote */
.doc-crumb-tools { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.doc-fbtn.active { background:var(--g,#146C43); border-color:var(--g,#146C43); color:#fff; }
.docsel-check { display:inline-flex; align-items:center; margin-right:2px; }
.docsel-check input { width:18px; height:18px; cursor:pointer; accent-color:var(--g,#146C43); }
.doc-card.docsel-on { outline:2px solid var(--g,#146C43); outline-offset:1px; background:var(--gl,rgba(20,108,67,.06)); }
.docsel-bar { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:1200; display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); box-shadow:0 8px 28px rgba(16,38,26,.18); border-radius:14px; padding:10px 16px; max-width:94vw; }
.docsel-count { display:inline-flex; align-items:center; gap:6px; font:800 13.5px var(--font,Manrope,sans-serif); color:var(--g,#146C43); }
.docsel-count .msym { font-size:18px; }
.docsel-dest { display:flex; align-items:center; gap:8px; font:700 12.5px var(--font,Manrope,sans-serif); color:var(--text2,#3C463B); }
.docsel-dest select { min-width:170px; max-width:42vw; }
.docsel-bar .btn-mini .msym { font-size:16px; vertical-align:-3px; }
@media (max-width:640px){ .docsel-bar { left:8px; right:8px; transform:none; justify-content:center; } .docsel-dest select { max-width:60vw; } }

/* ══════════════════════ LANDING PAGES (.lp-*) ══════════════════════════════ */
/* Gestión: cabecera de lista + tarjetas de landing */
.lp-listhd { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.lp-listhd-title { font-size:18px; font-weight:800; color:var(--text,#18211A); }
.lp-listhd-sub { font-size:13px; color:var(--muted,#5F6B5C); margin-top:3px; }
.lp-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.lp-card { background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:var(--radius-lg,16px); box-shadow:var(--shadow-card,0 1px 2px rgba(16,38,26,.05)); display:flex; flex-direction:column; overflow:hidden; }
.lp-card-body { padding:16px 16px 12px; flex:1; }
.lp-card-badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.lp-card-title { font-size:16px; font-weight:800; color:var(--text,#18211A); }
.lp-card-slug { font-size:12.5px; color:var(--muted,#5F6B5C); margin-top:4px; display:flex; align-items:center; gap:2px; word-break:break-all; }
.lp-card-meta { font-size:12px; color:var(--muted,#5F6B5C); margin-top:6px; }
.lp-card-actions { display:flex; gap:6px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid var(--surface2,#F6F8F3); background:var(--bg,#FBFCFA); }
.lp-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; border-radius:999px; padding:3px 9px; white-space:nowrap; }
.lp-badge .msym { font-size:13px; }
.lp-badge.pub { background:var(--gl,rgba(20,108,67,.12)); color:var(--g,#146C43); }
.lp-badge.draft { background:var(--surface2,#F6F8F3); color:var(--muted,#5F6B5C); }
.lp-badge.primary { background:var(--gold-l,rgba(212,135,10,.14)); color:var(--gold,#B8860B); }

/* Editor: barra superior + rejilla de dos columnas */
.lp-topbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.lp-topbar-title { font-size:16px; font-weight:800; color:var(--text,#18211A); display:flex; align-items:center; gap:8px; }
.lp-topbar-actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.lp-editor { display:grid; grid-template-columns:minmax(320px,1fr) minmax(320px,1.1fr); gap:18px; align-items:start; }
@media (max-width:960px){ .lp-editor { grid-template-columns:1fr; } }
.lp-panel-left { display:flex; flex-direction:column; gap:14px; min-width:0; }
.lp-panel-right { position:sticky; top:12px; min-width:0; }

/* Editor: acordeón de ajustes */
.lp-acc { background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:var(--radius-lg,16px); overflow:hidden; }
.lp-acc-hd { display:flex; align-items:center; gap:8px; padding:13px 16px; font-size:13.5px; font-weight:800; color:var(--text,#18211A); cursor:pointer; list-style:none; }
.lp-acc-hd::-webkit-details-marker { display:none; }
.lp-acc-hd .msym { color:var(--g,#146C43); }
.lp-acc-body { padding:0 16px 16px; display:flex; flex-direction:column; gap:12px; }
.lp-sub { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#5F6B5C); margin-top:6px; }
.lp-color-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; }
@media (max-width:520px){ .lp-color-row { grid-template-columns:1fr 1fr; } }
.lp-color { padding:2px; height:38px; cursor:pointer; }

/* Editor: campos genéricos */
.lp-fl { display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; color:var(--text2,#3C463B); }
.lp-fl-lbl { font-size:12px; font-weight:700; color:var(--text2,#3C463B); }
.lp-hint { font-size:11px; font-weight:500; color:var(--muted,#5F6B5C); }
.lp-hint code { background:var(--surface2,#F6F8F3); padding:1px 5px; border-radius:5px; font-size:11px; }
.lp-chk { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text2,#3C463B); cursor:pointer; }
.lp-imgrow { display:flex; gap:12px; align-items:flex-start; }
.lp-imgprev { width:72px; height:72px; border-radius:10px; background-size:cover; background-position:center; background-color:var(--surface2,#F6F8F3); border:1px solid var(--border,#DDE4D7); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lp-imgprev.empty .msym { color:var(--muted,#5F6B5C); font-size:24px; }
.lp-imgbtns { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }

/* Editor: lista de bloques */
.lp-blocks-hd { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; color:var(--text,#18211A); }
.lp-blocks-hd .msym { color:var(--g,#146C43); }
.lp-addbar { }
.lp-addsel { cursor:pointer; }
.lp-blocklist { display:flex; flex-direction:column; gap:8px; }
.lp-blocks-empty { font-size:13px; color:var(--muted,#5F6B5C); text-align:center; padding:20px; border:1px dashed var(--border,#DDE4D7); border-radius:12px; }
.lp-block { display:flex; align-items:center; gap:10px; background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:12px; padding:10px 12px; cursor:pointer; transition:border-color .12s,background .12s; }
.lp-block:hover { border-color:var(--g2,#1E9E5A); }
.lp-block.sel { border:2px solid var(--g,#146C43); background:var(--gl,rgba(20,108,67,.08)); }
.lp-block-ico { color:var(--g,#146C43); font-size:20px; flex-shrink:0; }
.lp-block-info { flex:1; min-width:0; }
.lp-block-name { font-size:13.5px; font-weight:700; color:var(--text,#18211A); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lp-block-type { font-size:11px; color:var(--muted,#5F6B5C); }
.lp-block-tools { display:flex; gap:2px; flex-shrink:0; }
.lp-tool { background:transparent; border:none; cursor:pointer; color:var(--muted,#5F6B5C); border-radius:6px; padding:4px; display:inline-flex; line-height:1; }
.lp-tool .msym { font-size:18px; }
.lp-tool:hover { background:var(--surface2,#F6F8F3); color:var(--text,#18211A); }
.lp-tool.danger:hover { background:var(--red-l,rgba(194,53,53,.10)); color:var(--red,#C2342F); }
.lp-tool:disabled { opacity:.35; cursor:not-allowed; }

/* Editor: formulario de props del bloque */
.lp-form-empty { font-size:13px; color:var(--muted,#5F6B5C); text-align:center; padding:22px; border:1px dashed var(--border,#DDE4D7); border-radius:12px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.lp-form-empty .msym { font-size:26px; }
.lp-blockform { background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:var(--radius-lg,16px); overflow:hidden; }
.lp-blockform-hd { display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--border,#DDE4D7); background:var(--bg,#FBFCFA); font-size:13.5px; font-weight:800; color:var(--text,#18211A); }
.lp-blockform-hd .msym { color:var(--g,#146C43); }
.lp-blockform-body { padding:16px; display:flex; flex-direction:column; gap:12px; }
.lp-item { border:1px solid var(--border,#DDE4D7); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; background:var(--bg,#FBFCFA); }
.lp-item-hd { display:flex; align-items:center; justify-content:space-between; }
.lp-item-n { font-size:11px; font-weight:800; color:var(--muted,#5F6B5C); }
.lp-schrow-edit { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center; }
.lp-gal-thumbs { display:flex; flex-wrap:wrap; gap:8px; }
.lp-gal-thumb { position:relative; width:72px; height:72px; border-radius:10px; background-size:cover; background-position:center; border:1px solid var(--border,#DDE4D7); }
.lp-gal-del { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:none; background:var(--red,#C2342F); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lp-gal-del .msym { font-size:15px; }

/* Editor: marco de vista previa */
.lp-preview-frame { border:1px solid var(--border,#DDE4D7); border-radius:var(--radius-lg,16px); overflow:hidden; background:var(--surface,#fff); }
.lp-preview-bar { padding:8px 14px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted,#5F6B5C); background:var(--bg,#FBFCFA); border-bottom:1px solid var(--border,#DDE4D7); }
.lp-preview-scroll { max-height:calc(100vh - 160px); overflow-y:auto; }

/* Overlay de vista previa / vista publicada */
.lp-overlay-modal { max-width:960px; width:96vw; padding:0; overflow:hidden; }
.lp-overlay-body { max-height:82vh; overflow-y:auto; }
.lp-empty-render { padding:48px 24px; text-align:center; color:var(--muted,#5F6B5C); font-size:14px; font-weight:600; }

/* ── RENDER de la landing (compartido: editor · preview · pública) ─────────── */
.lp-root { --lp-primary:#146C43; --lp-bg:#fff; --lp-text:#16211c; --lp-accent:#1e9e5a; background:var(--lp-bg); color:var(--lp-text); font-family:var(--font,Manrope,sans-serif); }
.lp-root .lp-h2 { font-size:22px; font-weight:800; color:var(--lp-text); margin:0 0 16px; }
.lp-root .lp-body { font-size:15px; line-height:1.65; color:var(--lp-text); }
.lp-root .lp-btn { display:inline-block; background:var(--lp-primary); color:#fff; font-weight:700; font-size:14px; border-radius:10px; padding:11px 22px; text-decoration:none; border:none; cursor:pointer; margin-top:4px; }
.lp-root .lp-btn-light { background:#fff; color:var(--lp-primary); }
.lp-sec { padding:44px 32px; max-width:1000px; margin:0 auto; }
@media (max-width:600px){ .lp-sec { padding:32px 20px; } }

/* hero */
.lp-hero { padding:72px 32px; text-align:center; background:linear-gradient(135deg,var(--lp-primary),var(--lp-accent)); color:#fff; background-size:cover; background-position:center; }
.lp-hero.has-img { color:#fff; }
.lp-hero-in { max-width:760px; margin:0 auto; }
.lp-hero-title { font-size:38px; font-weight:800; margin:0 0 12px; line-height:1.1; }
.lp-hero-sub { font-size:17px; opacity:.92; margin:0 0 20px; line-height:1.5; }
.lp-hero .lp-btn { background:#fff; color:var(--lp-primary); }
@media (max-width:600px){ .lp-hero { padding:52px 20px; } .lp-hero-title { font-size:28px; } }

/* about */
.lp-about { display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
.lp-about.has-img { grid-template-columns:1.2fr 1fr; }
@media (max-width:700px){ .lp-about.has-img { grid-template-columns:1fr; } }
.lp-about-img img { width:100%; border-radius:14px; display:block; object-fit:cover; }

/* features */
.lp-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.lp-feature { background:var(--surface,#fff); border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:22px; text-align:center; }
.lp-feature-ico { font-size:34px; color:var(--lp-primary); }
.lp-feature-t { font-size:16px; font-weight:800; color:var(--lp-text); margin:10px 0 6px; }
.lp-feature-x { font-size:13.5px; line-height:1.55; color:var(--lp-text); opacity:.85; margin:0; }

/* gallery */
.lp-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.lp-gal-cell { aspect-ratio:1/1; border-radius:12px; background-size:cover; background-position:center; background-color:rgba(0,0,0,.06); }

/* cta banner */
.lp-ctabanner { background:var(--lp-primary); color:#fff; padding:52px 32px; text-align:center; }
.lp-ctabanner-in { max-width:680px; margin:0 auto; }
.lp-ctabanner-t { font-size:26px; font-weight:800; margin:0 0 10px; }
.lp-ctabanner-x { font-size:16px; opacity:.92; margin:0 0 18px; line-height:1.5; }

/* contact */
.lp-contact { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:700px){ .lp-contact { grid-template-columns:1fr; } }
.lp-contact-row { display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--lp-text); margin-bottom:12px; }
.lp-contact-row .msym { color:var(--lp-primary); }
.lp-contact-row a { color:var(--lp-primary); text-decoration:none; }
.lp-contact-form { display:flex; flex-direction:column; gap:10px; }
.lp-inp { width:100%; box-sizing:border-box; border:1px solid rgba(0,0,0,.15); border-radius:10px; padding:11px 13px; font-size:14px; font-family:inherit; background:#fff; color:var(--lp-text); }
.lp-inp:disabled { background:var(--surface2,#F6F8F3); }

/* schedule */
.lp-schedule { display:flex; flex-direction:column; gap:0; border:1px solid rgba(0,0,0,.08); border-radius:12px; overflow:hidden; }
.lp-sch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid rgba(0,0,0,.06); }
.lp-sch-row:last-child { border-bottom:none; }
.lp-sch-lbl { font-size:14.5px; font-weight:600; color:var(--lp-text); }
.lp-sch-time { font-size:14px; font-weight:700; color:var(--lp-primary); white-space:nowrap; }

/* ═══════════ "Wrapped" · resumen anual del atleta (historia por slides) ═══════════ */
.wrap-shell { max-width:520px; margin:0 auto; }
.wrap-yearbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--text2,#3C463B); font-weight:700; }
.wrap-yearbar .msym { color:var(--g,#146C43); }
.wrap-year-lbl { font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#5F6B5C); }
.wrap-year-sel { border:1px solid var(--border,#DDE4D7); border-radius:10px; padding:6px 10px; font-weight:700; background:var(--surface,#fff); color:var(--text,#18211A); cursor:pointer; }

.wrap-stage { position:relative; width:100%; aspect-ratio:4/5; border-radius:24px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.18); }
@supports not (aspect-ratio:4/5) { .wrap-stage { height:640px; } }

.wrap-slide { position:absolute; inset:0; display:none; color:#fff; overflow:hidden; }
.wrap-slide.active { display:flex; }
.wrap-slide-in { position:relative; z-index:2; margin:auto; width:100%; padding:36px 32px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.wrap-slide::after { content:''; position:absolute; z-index:1; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.10); top:-90px; right:-90px; }
.wrap-slide::before { content:''; position:absolute; z-index:1; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.08); bottom:-80px; left:-70px; }

.wrap-avatar { width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:30px; margin-bottom:6px; }
.wrap-icon { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.wrap-icon .msym { font-size:34px; }
.wrap-kicker { font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
.wrap-big { font-size:88px; line-height:1.02; font-weight:800; text-shadow:0 2px 20px rgba(0,0,0,.15); }
.wrap-label { font-size:20px; font-weight:700; opacity:.95; }
.wrap-sub { font-size:15px; font-weight:500; opacity:.85; max-width:320px; margin-top:6px; }

/* Animación de entrada sutil de la slide activa. */
.wrap-slide.anim .wrap-slide-in { animation:wrapIn .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes wrapIn { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:none; } }

/* Resumen final */
.wrap-summary .wrap-slide-in { gap:10px; justify-content:flex-start; padding-top:34px; }
.wrap-sum-name { font-size:34px; font-weight:800; line-height:1.05; }
.wrap-sum-quote { font-size:16px; font-weight:500; font-style:italic; opacity:.92; max-width:360px; }
.wrap-miles { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; width:100%; margin:8px 0; }
.wrap-mile { background:rgba(255,255,255,.12); border-radius:14px; padding:12px 10px; }
.wrap-mile .msym { font-size:24px; opacity:.9; }
.wrap-mile-v { font-size:28px; font-weight:800; line-height:1.1; }
.wrap-mile-l { font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; opacity:.82; }
.wrap-sum-badges { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.wrap-badge-chip { display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.16); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; }
.wrap-badge-chip .msym { font-size:15px; }
.wrap-badge-chip.more { background:rgba(255,255,255,.28); }
.wrap-sum-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.wrap-dl-btn { display:inline-flex; align-items:center; gap:6px; border:none; cursor:pointer; background:#fff; color:var(--g3,#0B5132); font-weight:800; font-size:14px; padding:9px 16px; border-radius:999px; }
.wrap-dl-btn .msym { font-size:18px; }
.wrap-dl-btn.ghost { background:rgba(255,255,255,.18); color:#fff; }
/* CTA de navegación interna (insignias / tienda) — no forma parte del canvas exportado. */
.wrap-sum-cta { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.wrap-cta-btn { display:inline-flex; align-items:center; gap:6px; border:1.5px solid rgba(255,255,255,.55); cursor:pointer; background:rgba(255,255,255,.12); color:#fff; font-weight:800; font-size:13.5px; padding:8px 15px; border-radius:999px; transition:background .15s; }
.wrap-cta-btn:hover { background:rgba(255,255,255,.24); }
.wrap-cta-btn .msym { font-size:18px; }
.wrap-brand { margin-top:6px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }

/* Controles */
.wrap-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; }
.wrap-nav { width:44px; height:44px; border-radius:50%; border:1px solid var(--border,#DDE4D7); background:var(--surface,#fff); color:var(--g,#146C43); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.wrap-nav:disabled { opacity:.4; cursor:default; }
.wrap-nav .msym { font-size:26px; }
.wrap-dots { display:flex; gap:8px; }
.wrap-dot { width:9px; height:9px; border-radius:50%; border:none; padding:0; background:var(--border,#DDE4D7); cursor:pointer; }
.wrap-dot.active { background:var(--g,#146C43); transform:scale(1.25); }

@media (max-width:560px) { .wrap-big { font-size:66px; } .wrap-sum-name { font-size:28px; } }

/* Impresión: solo la slide de resumen, a página completa (mínimo viable PDF). */
@media print {
  body * { visibility:hidden; }
  .wrap-summary, .wrap-summary * { visibility:visible; }
  .wrap-summary { position:fixed !important; inset:0 !important; display:flex !important; border-radius:0 !important; }
  .wrap-sum-actions, .wrap-sum-cta, .wrap-controls, .wrap-yearbar { display:none !important; }
}

/* ══ Notificaciones (campana in-app) ══ */
.notif-wrap { position:relative; }
.notif-bell { position:relative; background:transparent; border:none; cursor:pointer; color:var(--sidebar-text,var(--muted)); width:34px; height:34px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s,color .15s; }
.notif-bell:hover { background:var(--gl,rgba(20,108,67,.12)); color:var(--g,#146C43); }
.notif-bell .msym { font-size:20px; }
.notif-badge { position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--red,#D94040); color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--sidebar-bg,var(--surface,#fff)); }
.notif-panel { position:absolute; bottom:calc(100% + 10px); right:0; width:340px; max-width:88vw; max-height:60vh; display:flex; flex-direction:column; background:var(--surface,#fff); border:1px solid var(--border,#DDE4D7); border-radius:var(--radius-lg,14px); box-shadow:var(--shadow-card,0 10px 30px rgba(16,38,26,.18)); z-index:1000; overflow:hidden; }
.notif-panel-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border,#DDE4D7); background:var(--bg,#F6F8F3); }
.notif-panel-title { font-size:13px; font-weight:800; color:var(--text,#18211A); }
.notif-readall { background:transparent; border:none; cursor:pointer; color:var(--g,#146C43); font-size:11.5px; font-weight:700; font-family:var(--font,inherit); padding:2px 4px; border-radius:6px; }
.notif-readall:hover { background:var(--gl,rgba(20,108,67,.12)); }
.notif-list { overflow-y:auto; flex:1; }
.notif-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:34px 16px; color:var(--muted,#5F6B5C); font-size:13px; text-align:center; }
.notif-empty .msym { font-size:26px; opacity:.6; }
.notif-item { display:flex; align-items:flex-start; gap:9px; padding:11px 12px 11px 14px; border-bottom:1px solid var(--surface2,#F6F8F3); cursor:pointer; position:relative; transition:background .12s; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--bg,#F6F8F3); }
.notif-item.unread { background:var(--gl,rgba(20,108,67,.08)); }
.notif-dot { width:8px; height:8px; border-radius:50%; background:transparent; margin-top:5px; flex-shrink:0; }
.notif-item.unread .notif-dot { background:var(--g,#146C43); }
.notif-item-main { flex:1; min-width:0; }
.notif-item-title { font-size:13px; font-weight:700; color:var(--text,#18211A); line-height:1.35; }
.notif-item-body { font-size:12px; color:var(--text2,#3C463B); line-height:1.45; margin-top:2px; word-break:break-word; }
.notif-item-time { font-size:11px; color:var(--muted,#5F6B5C); margin-top:4px; }
.notif-item-del { background:transparent; border:none; cursor:pointer; color:var(--muted,#5F6B5C); padding:2px; border-radius:6px; line-height:1; opacity:0; transition:opacity .12s,color .12s,background .12s; flex-shrink:0; }
.notif-item:hover .notif-item-del { opacity:1; }
.notif-item-del .msym { font-size:16px; }
.notif-item-del:hover { color:var(--red,#D94040); background:var(--red-l,rgba(217,64,64,.12)); }
@media (max-width:900px) { .notif-panel { bottom:auto; top:calc(100% + 8px); } }

/* Encabezado del panel: acciones (marcar todas + preferencias) */
.notif-panel-actions { display:flex; align-items:center; gap:4px; }
.notif-prefs-btn { background:transparent; border:none; cursor:pointer; color:var(--muted,#5F6B5C); width:26px; height:26px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; transition:background .12s,color .12s; }
.notif-prefs-btn:hover { background:var(--gl,rgba(20,108,67,.12)); color:var(--g,#146C43); }
.notif-prefs-btn .msym { font-size:17px; }

/* Modal de preferencias de notificaciones */
.notif-pref-list { display:flex; flex-direction:column; }
.notif-pref-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 2px; cursor:pointer; border-bottom:1px solid var(--surface2,#F6F8F3); }
.notif-pref-list .notif-pref-row:last-child { border-bottom:none; }
.notif-pref-txt { min-width:0; }
.notif-pref-label { font-size:13.5px; font-weight:700; color:var(--text,#18211A); }
.notif-pref-desc { font-size:12px; color:var(--muted,#5F6B5C); margin-top:2px; line-height:1.4; }
.notif-pref-chk { width:18px; height:18px; flex-shrink:0; cursor:pointer; accent-color:var(--g,#146C43); }
.notif-pref-sep { height:1px; background:var(--border,#DDE4D7); margin:6px 0 2px; }

/* ══ TOOLTIPS (ayuda contextual) ═══════════════════════════════════════════ */
/* Uso: añade data-tip="texto" a cualquier elemento (botón, ícono, chip). Se
   muestra al hover y al foco por teclado (accesible). Sin JS ni emojis; usa la
   paleta (verde profundo). Para íconos-solo, mantener también aria-label/title.
   Posición por defecto: arriba; usa .tip-left / .tip-right / .tip-below para
   variar. max-width con wrap para textos largos. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
  background: #10261A; color: #F1ECE0; font-size: 12px; font-weight: 600; line-height: 1.35;
  padding: 7px 10px; border-radius: 8px; white-space: normal; width: max-content; max-width: 240px;
  box-shadow: 0 6px 20px rgba(16,38,26,.28); opacity: 0; pointer-events: none; z-index: 1200;
  transition: opacity .14s ease, transform .14s ease;
}
[data-tip]::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #10261A; opacity: 0; pointer-events: none;
  z-index: 1200; transition: opacity .14s ease;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-tip]:hover::before, [data-tip]:focus-visible::before { opacity: 1; }
/* Variantes de posición */
[data-tip].tip-below::after { bottom: auto; top: calc(100% + 8px); }
[data-tip].tip-below::before { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: #10261A; }
[data-tip].tip-left::after  { left: auto; right: calc(100% + 8px); bottom: 50%; transform: translateY(50%); }
[data-tip].tip-right::after { left: calc(100% + 8px); right: auto; bottom: 50%; transform: translateX(0) translateY(50%); }
[data-tip].tip-left::before, [data-tip].tip-right::before { display: none; }
/* En pantallas táctiles el hover no aplica bien; el atributo title nativo sirve
   de respaldo. No romper layout: el tooltip nunca ocupa espacio (position:absolute). */

/* ══ SALÓN DE TROFEOS (F2.1 gamificación · insignias) ══════════════════════ */
/* Cabecera de nivel (hero) */
.trophy-hero { position:relative; overflow:hidden; border-radius:20px; padding:24px 26px; color:#fff;
  background:var(--hero-grad, linear-gradient(135deg,#10261A,#1E7A48)); margin-bottom:22px; box-shadow:var(--shadow-card); }
.trophy-hero-deco { position:absolute; right:-50px; top:-50px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.08); }
.trophy-hero-in { position:relative; z-index:1; }
.trophy-hero-top { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.trophy-level-ring { width:76px; height:76px; border-radius:50%; flex-shrink:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.5); }
.trophy-level-num { font-size:30px; font-weight:800; line-height:1; }
.trophy-level-lbl { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.trophy-hero-info { flex:1; min-width:220px; }
.trophy-hero-title { font-size:22px; font-weight:800; letter-spacing:-.01em; }
.trophy-hero-sub { font-size:13px; opacity:.85; margin-top:2px; }
.trophy-xp-bar { height:9px; border-radius:6px; background:rgba(255,255,255,.20); overflow:hidden; margin-top:12px; }
.trophy-xp-bar > div { height:100%; background:#FFD466; border-radius:6px; transition:width .3s; }
.trophy-xp-meta { display:flex; justify-content:space-between; gap:10px; font-size:11.5px; opacity:.85; margin-top:6px; flex-wrap:wrap; }
.trophy-hero-actions { flex-shrink:0; }
.trophy-award-btn { background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.5) !important; color:#fff !important; }
.trophy-award-btn:hover { background:rgba(255,255,255,.28) !important; }

/* Encabezado de sección + contadores */
.trophy-section-hd { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:var(--text);
  margin:22px 0 12px; }
.trophy-section-hd .msym { font-size:20px; color:var(--g); }
.trophy-count { font-size:12px; font-weight:800; color:var(--muted); background:var(--surface2); border-radius:999px; padding:2px 9px; }
.trophy-empty { font-size:13px; color:var(--muted); padding:6px 0 4px; }

/* Grid de medallones */
.badge-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.badge-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 12px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:var(--shadow-card); }
.badge-card.locked { opacity:.82; }

/* Medallón hexagonal */
.badge-medal { position:relative; width:78px; height:78px; display:flex; align-items:center; justify-content:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); color:#fff; margin-bottom:2px; }
.badge-medal .msym { font-size:34px; }
.badge-medal.in-progress { opacity:.9; }
.badge-tier { position:absolute; bottom:8px; font-size:8.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:rgba(0,0,0,.28); border-radius:999px; padding:1px 7px; }
.badge-lock { position:absolute; right:-2px; bottom:-2px; font-size:20px !important; color:var(--muted);
  background:var(--surface); border-radius:50%; padding:2px; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.locked-medal { background:var(--surface2); color:var(--muted); border:1px dashed var(--border); }

/* Colores por rareza (medallón + chip) */
.rarity-comun.badge-medal      { background:linear-gradient(150deg,#7C8A7E,#5F6B5C); }
.rarity-raro.badge-medal       { background:linear-gradient(150deg,#3B82F6,#2563EB); }
.rarity-epico.badge-medal      { background:linear-gradient(150deg,#A855F7,#7E22CE); }
.rarity-legendario.badge-medal { background:linear-gradient(150deg,#F5B942,#B5740B); }
/* Mockup: el RELLENO del emblema va por TIER; la rareza se muestra como PUNTO. */
.tier-bronze.badge-medal { background:linear-gradient(150deg,#C08A4E,#A56A33); }
.tier-silver.badge-medal { background:linear-gradient(150deg,#9AA6B6,#6B7688); }
.tier-gold.badge-medal   { background:linear-gradient(150deg,#F2CF6B,#B58218); }
.tier-none.badge-medal   { background:linear-gradient(150deg,#2C6E49,#146C43); }
.badge-medal .rarity-dot { position:absolute; top:6px; right:6px; width:11px; height:11px; border-radius:50%; border:2px solid rgba(255,255,255,.85); box-shadow:0 1px 2px rgba(0,0,0,.25); }
.rdot-comun{ background:#7C8A7E; } .rdot-raro{ background:#2563EB; }
.rdot-epico{ background:#A855F7; } .rdot-legendario{ background:#E3C066; }

/* Tema OSCURO PREMIUM del Salón de Trofeos (mockup). Aislado en .trophy-dark
   para no afectar al resto de la app. Texto base claro para cubrir cualquier
   subelemento no override explícito y evitar oscuro-sobre-oscuro. */
.trophy-dark { background:#0E241A; border:1px solid #1E3B2C; border-radius:20px; padding:18px 18px 24px; color:#E6EDE6; }
.trophy-dark .trophy-section-hd { color:#F1ECE0; }
.trophy-dark .trophy-section-hd .msym { color:#3BD17E; }
.trophy-dark .trophy-count { background:rgba(255,255,255,.10); color:#C7D3C7; }
.trophy-dark .trophy-empty,
.trophy-dark .badge-how,
.trophy-dark .badge-next,
.trophy-dark .badge-date,
.trophy-dark .badge-date .msym,
.trophy-dark .badge-prog-desc,
.trophy-dark .badge-prog-num { color:#9FB0A2; }
.trophy-dark .badge-card,
.trophy-dark .badge-prog-card { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.09); box-shadow:none; }
.trophy-dark .badge-name { color:#F1ECE0; }
.trophy-dark .badge-prog-tier { color:#3BD17E; }
.trophy-dark .badge-scope { color:#C7D3C7; border-color:rgba(255,255,255,.18); }
.trophy-dark .badge-xp { color:#3BD17E; }
.trophy-dark .badge-rarity.rarity-comun { background:rgba(255,255,255,.10); color:#C7D3C7; }
.trophy-dark .locked-medal { background:rgba(255,255,255,.05); color:#8CA093; border-color:rgba(255,255,255,.16); }
.trophy-dark .badge-lock { background:#12301F; color:#9FB0A2; }
.trophy-dark .badge-prog-bar { background:rgba(255,255,255,.12); }
.badge-rarity { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:2px 9px; }
.badge-rarity.rarity-comun      { background:var(--surface2); color:var(--text2); }
.badge-rarity.rarity-raro       { background:var(--blue-l); color:var(--blue); }
.badge-rarity.rarity-epico      { background:rgba(168,85,247,.14); color:#7E22CE; }
.badge-rarity.rarity-legendario { background:var(--gold-l); color:var(--gold); }

.badge-name { font-size:13.5px; font-weight:800; color:var(--text); line-height:1.25; }
.badge-meta { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:2px; }
.badge-scope { font-size:10px; font-weight:700; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:1px 7px; }
.badge-date { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--muted); }
.badge-date .msym { font-size:13px; }
.badge-xp { font-size:11px; font-weight:800; color:var(--g); }
.badge-next { font-size:10.5px; color:var(--muted); margin-top:2px; }
.badge-how { font-size:11.5px; color:var(--muted); line-height:1.4; }

/* En progreso (tarjetas horizontales) */
.badge-prog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.badge-prog-card { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:14px 16px; box-shadow:var(--shadow-card); }
.badge-prog-card .badge-medal { width:56px; height:56px; flex-shrink:0; }
.badge-prog-card .badge-medal .msym { font-size:26px; }
.badge-prog-body { flex:1; min-width:0; }
.badge-prog-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.badge-prog-tier { font-size:11px; font-weight:700; color:var(--muted); }
.badge-prog-desc { font-size:11.5px; color:var(--muted); margin:2px 0 8px; line-height:1.4; }
.badge-prog-bar { height:8px; border-radius:6px; background:var(--surface2); overflow:hidden; }
.badge-prog-bar > div { height:100%; background:var(--g); border-radius:6px; transition:width .3s; }
.badge-prog-num { font-size:11px; font-weight:800; color:var(--text2); text-align:right; margin-top:4px; }

@media (max-width:560px) {
  .trophy-hero-top { gap:14px; }
  .badge-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
}

/* ══ Administración de insignias del club (perm badges.manage) ══════════════ */
.ins-admin-hd { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.ins-admin-title { flex:1; min-width:160px; font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--text); display:flex; align-items:center; gap:8px; }
.ins-admin-sub { font-size:12.5px; color:var(--muted); margin-bottom:16px; }
.ins-admin-mini { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:18px 0 8px; }
.ins-admin-list { display:flex; flex-direction:column; gap:10px; }
.ins-admin-row { display:flex; align-items:center; gap:14px; background:var(--surface,#fff); border:1px solid var(--border,#E4E9E0); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow-card); }
.ins-admin-row-off { opacity:.62; }
.ins-admin-row-body { flex:1; min-width:0; }
.ins-admin-row-name { font-size:14.5px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ins-admin-row-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:5px; }
.ins-admin-row-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.ins-chip { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:var(--text2,#5F6B5C); background:var(--surface2,#F0F3EC); border-radius:999px; padding:3px 9px; }
.ins-chip-off { background:#FBE7EF; color:#6B1D3D; }
.ins-chip-pro { background:linear-gradient(135deg,#F5B942,#B5740B); color:#fff; }
.ins-admin-plan { font-size:12.5px; color:var(--muted); margin:-8px 0 16px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* Chip de plan (free/pro) — reutilizable: gestión de instancias + Salón. */
.plan-chip { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:800; letter-spacing:.03em; border-radius:999px; padding:2px 8px; vertical-align:middle; }
.plan-chip-free { background:var(--surface2,#F0F3EC); color:var(--text2,#5F6B5C); }
.plan-chip-pro { background:linear-gradient(135deg,#F5B942,#B5740B); color:#fff; }
/* Formulario */
.ins-form-row { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.ins-form-icon { width:130px; flex-shrink:0; text-align:center; }
.ins-form-main { flex:1; min-width:220px; }
.ins-icon-preview { width:70px; height:70px; margin:2px auto 0; }
.ins-icon-preview .msym { font-size:32px; }
.ins-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:12px; }
.ins-seg { display:inline-flex; gap:6px; margin-top:5px; }
.ins-seg-btn { border:1px solid var(--border,#E4E9E0); background:var(--surface,#fff); color:var(--text2,#5F6B5C); font-weight:700; font-size:13px; padding:8px 14px; border-radius:10px; cursor:pointer; }
.ins-seg-btn.on { background:var(--brand,#1E7A48); border-color:var(--brand,#1E7A48); color:#fff; }
.ins-rule-box { margin-top:12px; padding:14px; border:1px dashed var(--border,#E4E9E0); border-radius:12px; background:var(--surface2,#F7FAF4); }
.ins-tiers-hd { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; font-size:12.5px; font-weight:800; color:var(--text); }
.ins-tier-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }

/* ══ TIENDA (canje por puntos de gamificación) ═════════════════════════════ */
/* Hero */
.store-hero { position:relative; overflow:hidden; border-radius:20px; padding:22px 26px; color:#fff;
  background:var(--hero-grad, linear-gradient(135deg,#10261A,#1E7A48)); margin-bottom:20px; box-shadow:var(--shadow-card); }
.store-hero-deco { position:absolute; right:-50px; top:-50px; width:210px; height:210px; border-radius:50%; background:rgba(255,255,255,.08); }
.store-hero-in { position:relative; z-index:1; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.store-hero-info { flex:1; min-width:200px; }
.store-hero-title { font-size:22px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.store-hero-sub { font-size:13px; opacity:.85; margin-top:3px; }
.store-off-chip { font-size:10.5px; font-weight:700; letter-spacing:.03em; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:2px 10px; white-space:nowrap; }
.store-bal { display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.45); border-radius:14px; padding:11px 16px; flex-shrink:0; }
.store-bal .msym { font-size:28px; color:#FFD466; }
.store-bal-num { font-size:24px; font-weight:800; line-height:1; }
.store-bal-lbl { font-size:11px; opacity:.85; margin-top:2px; }
.store-hero-actions { display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; }
.store-hero-btn { background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.5) !important; color:#fff !important; }
.store-hero-btn:hover { background:rgba(255,255,255,.28) !important; }

/* Pestañas */
.store-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.store-tab { border:1.5px solid var(--border); background:transparent; border-radius:20px; padding:6px 16px; font:600 13px var(--font,Manrope,sans-serif); color:var(--muted); cursor:pointer; transition:all .15s; }
.store-tab:hover { border-color:var(--text2); color:var(--text); }
.store-tab.active { background:var(--g); border-color:var(--g); color:#fff; }

/* Grid de productos */
.store-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
/* Agrupación por categoría en el catálogo */
.store-cat-group { margin-bottom:22px; }
.store-cat-group:last-child { margin-bottom:0; }
.store-cat-h { margin:0 0 12px; font:800 15px var(--font,Manrope,sans-serif); color:var(--text); display:flex; align-items:center; gap:8px; }
.store-cat-h::after { content:""; flex:1; height:1px; background:var(--border); }
/* Ayuda breve bajo un toggle en el modal de configuración */
.store-cfg-help { margin:4px 0 0 27px; font:500 12px var(--font,Manrope,sans-serif); color:var(--muted); line-height:1.4; }
.store-card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; transition:box-shadow .15s,transform .15s; }
.store-card:hover { box-shadow:0 8px 22px rgba(16,38,26,.12); transform:translateY(-2px); }
.store-card.is-off { opacity:.72; }
.store-card-img { height:150px; background-size:cover; background-position:center; background-color:var(--surface2); }
.store-card-img-ph { display:flex; align-items:center; justify-content:center; color:var(--muted); background:linear-gradient(135deg,var(--surface2),var(--gl)); }
.store-card-img-ph .msym { font-size:44px; opacity:.55; }
.store-card-manage { position:absolute; top:8px; right:8px; display:flex; gap:6px; }
.store-card-manage .btn-mini { background:rgba(255,255,255,.92); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.store-card-body { padding:14px 15px; display:flex; flex-direction:column; gap:6px; flex:1; }
.store-card-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-height:0; }
.store-cat { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--g); background:var(--gl); border-radius:999px; padding:2px 9px; }
.store-badge-off { font-size:10px; font-weight:800; text-transform:uppercase; color:var(--gold); background:var(--gold-l); border-radius:999px; padding:2px 9px; }
.store-card-name { font-size:15px; font-weight:800; color:var(--text); line-height:1.25; }
.store-card-desc { font-size:12.5px; color:var(--muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.store-card-cost { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:2px; }
.store-points { font-size:18px; font-weight:800; color:var(--text); display:inline-flex; align-items:center; gap:3px; }
.store-points .msym { color:var(--g); }
.store-points small { font-size:11px; font-weight:700; color:var(--muted); }
.store-money { font-size:12.5px; font-weight:700; color:var(--muted); }
.store-stock { font-size:11.5px; font-weight:700; color:var(--muted); }
.store-stock.out { color:var(--red); }
.store-card-foot { margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.store-redeem-btn:disabled { opacity:.55; cursor:not-allowed; }
.store-reason { font-size:10.5px; font-weight:700; color:var(--red); width:100%; text-align:right; }

/* Modal de canje */
.store-redeem-prod { display:flex; align-items:center; gap:12px; }
.store-redeem-img { width:56px; height:56px; border-radius:12px; background-size:cover; background-position:center; background-color:var(--surface2); flex-shrink:0; }
.store-redeem-name { font-size:15px; font-weight:800; color:var(--text); }
.store-redeem-cost { font-size:13px; font-weight:700; color:var(--g); margin-top:3px; }
.store-redeem-after { margin-top:12px; font-size:12.5px; color:var(--text2); background:var(--surface2); border-radius:10px; padding:9px 12px; }

/* Checkbox alineado (config / producto) */
.store-chk { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--text2); cursor:pointer; line-height:1.4; }
.store-chk input { margin-top:2px; flex-shrink:0; }

/* Modal de producto: imagen */
.store-prod-imgrow { display:flex; align-items:center; gap:14px; }
.store-prod-imgprev { width:88px; height:88px; border-radius:12px; background-size:cover; background-position:center; background-color:var(--surface2); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.store-prod-imgprev.empty { border:1.5px dashed var(--border); }
.store-prod-imgprev .msym { font-size:30px; opacity:.6; }
.store-prod-imgbtns { display:flex; flex-direction:column; gap:8px; }

/* Lista de canjes (cola de gestor / historial socio) */
.store-filter-pills { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.store-fpill { border:1.5px solid var(--border); background:transparent; border-radius:20px; padding:5px 14px; font:600 12.5px var(--font,Manrope,sans-serif); color:var(--muted); cursor:pointer; transition:all .15s; }
.store-fpill:hover { border-color:var(--text2); color:var(--text); }
.store-fpill.active { background:var(--g); border-color:var(--g); color:#fff; }
.store-red-list { display:flex; flex-direction:column; gap:10px; }
.store-red-row { display:flex; align-items:flex-start; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px; box-shadow:var(--shadow-card); }
.store-red-img { width:52px; height:52px; border-radius:11px; background-size:cover; background-position:center; background-color:var(--surface2); flex-shrink:0; }
.store-red-main { flex:1; min-width:0; }
.store-red-name { font-size:14.5px; font-weight:800; color:var(--text); }
.store-red-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:3px; }
.store-red-cost { font-size:12.5px; font-weight:700; color:var(--g); display:inline-flex; align-items:center; gap:3px; }
.store-red-date { font-size:12px; color:var(--muted); }
.store-red-who { font-size:12.5px; color:var(--text2); margin-top:4px; }
.store-red-note { font-size:12px; color:var(--muted); margin-top:4px; font-style:italic; }
.store-red-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.store-red-status { font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:3px 11px; white-space:nowrap; }
.store-red-status.pend { background:var(--gold-l); color:var(--gold); }
.store-red-status.ok   { background:var(--blue-l); color:var(--blue); }
.store-red-status.done { background:var(--gl); color:var(--g); }
.store-red-status.no   { background:var(--red-l); color:var(--red); }
.store-red-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

@media (max-width:560px) {
  .store-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .store-hero-in { gap:14px; }
  .store-red-row { flex-wrap:wrap; }
  .store-red-side { align-items:flex-start; width:100%; flex-direction:row; justify-content:space-between; }
}