/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .dashboard-row { grid-template-columns: 1fr; }
  .detalle-grid  { grid-template-columns: 1fr; }
  .portal-result-grid { grid-template-columns: 1fr; }
  .portal-progress-card,
  .portal-summary-card { grid-column: auto; }
  .form-row { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .portal-hero { flex-direction: column; gap: 20px; }
  .portal-search-card-hero { flex: none; width: 100%; }
}

@media (max-width: 720px) {
  :root { --sidebar-w: 0px; }
  .sidebar {
    transform: translateX(-240px);
    width: 240px;
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main-content { margin-left: 0; }
  .sidebar-toggle { display: flex; }
  .view-container { padding: 16px; gap: 14px; }
  .portal-title { font-size: 1.5rem; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .modal { max-width: 100%; margin: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .portal-mini-stats { flex-wrap: wrap; }
  .portal-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .resumen-grid { grid-template-columns: 1fr 1fr; }
  .reglas-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .club-hist-row { grid-template-columns: 80px 1fr auto; }
  .club-hist-saldo { display: none; }
  .data-table th:nth-child(3),
  .data-table td:nth-child(3) { display: none; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .portal-title { font-size: 1.3rem; }
  .acciones-grid { grid-template-columns: 1fr 1fr; }
  .resumen-grid { grid-template-columns: 1fr; }
  .reglas-grid { grid-template-columns: 1fr 1fr; }
}

/* ── SVG sizing global (prevent unbounded expansion) ─────── */
.search-box svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--slate-400); }
.btn-back svg   { width: 16px; height: 16px; flex-shrink: 0; }
.btn-icon svg   { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary svg,
.btn-outline svg,
.btn-ghost svg,
.btn-export svg,
.btn-danger svg,
.btn-carnet svg,
.btn-whatsapp svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-toggle svg { width: 20px; height: 20px; }
.topbar svg { width: 18px; height: 18px; flex-shrink: 0; }
.empty-state svg { width: 48px; height: 48px; opacity: .35; }
.logo-icon svg   { width: 20px; height: 20px; color: var(--white); }

/* ── Table cell helpers ───────────────────────────────────── */
.td-name {
  font-weight: 600;
  color: var(--slate-800);
  font-size: .84rem;
  line-height: 1.3;
}
.td-sub {
  font-size: .74rem;
  color: var(--slate-500);
  margin-top: 2px;
}

/* ── Status grid items ────────────────────────────────────── */
.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  border-right: 1px solid var(--slate-100);
  border-bottom: 1px solid var(--slate-100);
  text-align: center;
}
.status-item:last-child { border-right: none; }
.status-item-val {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--slate-900);
}
.status-item-key {
  font-size: .7rem;
  color: var(--slate-500);
  margin-top: 3px;
}

/* ── Ranking full items ───────────────────────────────────── */
.ranking-full-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--slate-100);
  cursor: pointer;
  transition: background var(--transition);
  border-radius: var(--radius-sm);
}
.ranking-full-item:hover { background: var(--slate-50); }
.ranking-full-item:last-child { border-bottom: none; }

/* ── Ranking position medals ──────────────────────────────── */
.pos-1 { color: var(--gold-400) !important; font-size: .85rem !important; }
.pos-2 { color: var(--slate-400) !important; }
.pos-3 { color: var(--amber-600) !important; }

/* ── Accion rojo ──────────────────────────────────────────── */
.accion-rojo { border-color: var(--rose-100); }
.accion-rojo:hover { border-color: var(--rose-500); background: #fff1f2; }
.accion-rojo .accion-icon { background: var(--rose-100); color: var(--rose-600); }

/* ── Resumen meta ─────────────────────────────────────────── */
.resumen-meta {
  padding: 0 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .82rem;
  color: var(--slate-600);
}
.resumen-meta strong { color: var(--slate-700); }

/* ── Code lookup feedback ─────────────────────────────────── */
.codigo-status-ok  { font-size: .78rem; font-weight: 600; color: var(--green-600); }
.codigo-status-err { font-size: .78rem; font-weight: 600; color: var(--rose-600); }

/* ── Portal embedded hero copy ────────────────────────────── */
.portal-hero-copy h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 8px;
}
.portal-hero-copy p {
  font-size: .88rem;
  color: var(--blue-200);
  max-width: 480px;
  margin: 0 0 16px;
  line-height: 1.6;
}

/* ── btn-cead-success ─────────────────────────────────────── */
.btn-cead-success {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: var(--cead-success);
  color: var(--white); border: none; border-radius: var(--radius);
  font-size: var(--text-base); font-weight: 600; cursor: pointer;
  transition: background var(--transition); white-space: nowrap;
  box-shadow: 0 3px 10px rgba(14,159,138,.28);
}
.btn-cead-success:hover { background: var(--cead-success-hover); }
.btn-cead-success.btn-sm { padding: 5px 10px; font-size: var(--text-sm); }