/*
 * style.css — WU Campus
 * Clases utilitarias reutilizables para vistas admin y de usuario.
 * Complementa obsidian.css (variables) y glass.css (componentes base).
 */

/* ─── Tabs (panel-switcher) ────────────────────────────────────────────────── */
.m-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: var(--sp-6);
  overflow-x: auto;
}
.m-tab {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.m-tab:hover  { color: var(--text-primary); }
.m-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.m-panel      { display: none; }
.m-panel.active { display: block; }


/* ─── Progress bar ─────────────────────────────────────────────────────────── */
.pbar-track {
  flex: 1;
  height: 5px;
  background: var(--glass-bg-strong);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.pbar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  width: 0;
  transition: width 700ms cubic-bezier(0.34, 1.2, 0.64, 1);
}


/* ─── Section header ───────────────────────────────────────────────────────── */
.section-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.section-hdr h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  margin: 0;
}
.section-hdr .hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}


/* ─── Scrollable table wrapper ─────────────────────────────────────────────── */
.tscroll { overflow-x: auto; }

/* ─── Metric table ─────────────────────────────────────────────────────────── */
/* Se combina con .admin-table (base: bordes/padding/celdas) — .mtable solo agrega
   el comportamiento de columnas ordenables. */
.mtable th { white-space: nowrap; cursor: pointer; user-select: none; }
.mtable th:hover { color: var(--text-primary); }
.mtable th.sort-asc::after  { content: " ↑"; opacity: .7; }
.mtable th.sort-desc::after { content: " ↓"; opacity: .7; }
.mtable td strong { display: block; }
.mtable td .sub   { font-size: var(--fs-xs); color: var(--text-muted); }


/* ─── Table search input ───────────────────────────────────────────────────── */
.table-search {
  width: 100%;
  max-width: 280px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  outline: none;
}
.table-search:focus { border-color: var(--accent); }
.table-search::placeholder { color: var(--text-muted); }


/* ─── SVG Area chart ───────────────────────────────────────────────────────── */
.chart-svg { width: 100%; overflow: visible; }
.chart-area { fill-opacity: .18; }
.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot  { transition: r .15s; cursor: default; }
.chart-axis-label { font-size: 10px; fill: var(--text-muted, #8a8f98); font-family: inherit; }
.chart-grid-line  { stroke: var(--glass-border); stroke-width: 1; stroke-dasharray: 4 4; }


/* ─── SVG Donut chart ──────────────────────────────────────────────────────── */
.donut-ring { fill: none; stroke-width: 20; stroke-linecap: butt; transition: stroke-dashoffset 800ms cubic-bezier(0.34, 1.1, 0.64, 1); }
.donut-center { font-variant-numeric: tabular-nums; }
.donut-legend { display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center; }
.donut-legend-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); }
.donut-swatch { width: 10px; height: 10px; border-radius: var(--radius-sm); flex-shrink: 0; }


/* ─── Funnel chart ─────────────────────────────────────────────────────────── */
.funnel { display: flex; flex-direction: column; gap: var(--sp-2); }
.funnel-step { display: flex; flex-direction: column; gap: var(--sp-1); }
.funnel-bar-outer {
  background: var(--glass-bg-strong);
  border-radius: var(--radius-sm);
  height: 36px;
  position: relative;
  overflow: hidden;
}
.funnel-bar-inner {
  height: 100%;
  border-radius: var(--radius-sm);
  width: 0;
  transition: width 700ms cubic-bezier(0.34, 1.2, 0.64, 1);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
}
.funnel-bar-inner span { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: #fff; white-space: nowrap; }
.funnel-meta { display: flex; justify-content: space-between; }
.funnel-label { font-size: var(--fs-xs); color: var(--text-muted); }
.funnel-count { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-primary); }
.funnel-conv  { font-size: var(--fs-xs); color: var(--color-success, #4ade80); }
.funnel-arrow { text-align: center; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1; }


/* ─── Engagement boxes ─────────────────────────────────────────────────────── */
.eng-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.eng-box {
  text-align: center;
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
}
.eng-val { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--accent); font-variant-numeric: tabular-nums; margin: 0; }
.eng-lbl { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }


/* ─── Stickiness ring ──────────────────────────────────────────────────────── */
.sticky-circle { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.sticky-label  { position: absolute; text-align: center; }
.sticky-pct    { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--accent); display: block; line-height: 1; }
.sticky-sub    { font-size: var(--fs-xs); color: var(--text-muted); display: block; }
.sticky-ring   { fill: none; stroke-width: 8; }
.sticky-ring.track { stroke: var(--glass-bg-strong); }
.sticky-ring.fill  { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 900ms cubic-bezier(0.34, 1.1, 0.64, 1); }


/* ─── Tag cards ────────────────────────────────────────────────────────────── */
.tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.tag-card {
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.tag-name { font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-bottom: var(--sp-2); }
.tag-stat { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-3); }


/* ─── Stat row (label + bar + value in one line) ───────────────────────────── */
.stat-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.stat-row-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  min-width: 90px;
  white-space: nowrap;
}
.stat-row-val {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ─── Empty state ──────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}


/* ─── Utility: truncate text ───────────────────────────────────────────────── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ─── Divider ──────────────────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--glass-border);
  margin: var(--sp-4) 0;
  opacity: .5;
}

/* ─── Back link ────────────────────────────────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.back-link:hover { color: var(--text-primary); }


/* ─── Page-level tabs (ptab-bar / ptab) ────────────────────────────────────── */
.ptab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-subtle);
  margin-bottom: var(--sp-6);
}
.ptab {
  padding: var(--sp-3) var(--sp-5);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--tx-fast);
  white-space: nowrap;
}
.ptab.active { border-bottom-color: var(--accent); color: var(--accent); }
.ptab:hover:not(.active) { color: var(--text-primary); }


/* ─── KPI row — métricas (grid: todas las tarjetas entran, sin scroll) ─────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.kpi-rc {
  background: var(--glass-bg);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4);
  position: relative;
  overflow: hidden;
}
.kpi-rc.ab { border: 1.5px solid var(--accent); }
.kpi-vrow {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
  position: relative;
  z-index: 2;
}
.kpi-big-val {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.kpi-tri {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.kpi-tri.up   { color: var(--success); }
.kpi-tri.down { color: var(--danger); }
.kpi-tri.flat { color: var(--accent); }
.kpi-ttl {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .35px;
  line-height: 1.3;
  margin: 0 0 3px;
  position: relative;
  z-index: 2;
}
.kpi-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.3;
  margin: 0;
  position: relative;
  z-index: 2;
}
.kpi-wm {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 70px;
  height: 70px;
  fill: none;
  stroke: var(--glass-border);
  stroke-width: 1.5;
  pointer-events: none;
  z-index: 1;
  opacity: .85;
}
.val-dark   { color: var(--text-primary); }
.val-green  { color: var(--success); }
.val-red    { color: var(--danger); }
.val-accent { color: var(--accent); }