/* =========================================================================
   pages/portal.css — Portal de cliente (clientes/home.html, referidos.html)
   Clases usadas por el portal privado tras login: sin CSS hasta ahora.
   ========================================================================= */

.metric-card {
  padding: var(--sp-5);
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: var(--r-lg);
}
.metric-card h3 { margin-bottom: var(--sp-3); font-size: var(--fs-lg); }
.metric-card p { margin: 0 0 var(--sp-2); }
.metric-card p:last-child { margin-bottom: 0; }
.metric-card hr { border: none; border-top: 1px solid var(--t-line); margin: var(--sp-3) 0; }
.metric-card small { color: var(--t-text-2); }

.badge {
  display: inline-block;
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--t-panel-2);
  color: var(--t-text-2);
  border: 1px solid var(--t-line);
}
.badge--lead,
.badge--contactado { background: rgba(255, 181, 71, .15); color: var(--t-warn); border-color: rgba(255, 181, 71, .35); }
.badge--demo,
.badge--propuesta,
.badge--negociacion { background: rgba(124, 92, 255, .15); color: var(--t-primary); border-color: rgba(124, 92, 255, .35); }
.badge--cliente { background: rgba(34, 197, 94, .15); color: var(--t-success); border-color: rgba(34, 197, 94, .35); }
.badge--perdido { background: rgba(239, 68, 68, .15); color: var(--t-danger); border-color: rgba(239, 68, 68, .35); }

.data {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-5) 0;
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.data th,
.data td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--t-line);
  font-size: var(--fs-sm);
}
.data th {
  background: var(--t-panel-2);
  color: var(--t-text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--fs-xs);
}
.data tbody tr:last-child td { border-bottom: none; }

.alert {
  padding: var(--sp-5);
  background: rgba(255, 181, 71, .1);
  border: 1px solid rgba(255, 181, 71, .35);
  border-radius: var(--r-md);
  color: var(--t-text);
}
.alert p { margin: 0 0 var(--sp-2); }
.alert p:last-child { margin-bottom: 0; }

.referido__codigo {
  font-family: var(--ff-mono, monospace);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--t-primary);
  margin: var(--sp-3) 0;
}
.referido__big {
  font-size: var(--fs-4xl);
  font-weight: 800;
  margin: var(--sp-3) 0;
}
.referido__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: var(--r-md);
  margin: var(--sp-4) 0;
}
.referido__share input {
  flex: 1;
  min-width: 200px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--t-bg-alt);
  border: 1px solid var(--t-line);
  border-radius: var(--r-sm);
  color: var(--t-text);
  font-size: var(--fs-sm);
}

.cliente__billing {
  padding: var(--sp-5);
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: var(--r-lg);
}
.cliente__billing p { margin: 0 0 var(--sp-3); }
.cliente__billing .btn { margin-bottom: var(--sp-3); }