/* clientes section styles */

/* ── Nombre clickeable en tabla ──────────────────────────────────────────── */
.cliente-link {
  cursor: pointer;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.cliente-link:hover { color: var(--accent2); text-decoration: underline; }

/* ── Detalle — breadcrumb ────────────────────────────────────────────────── */
.det-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px 0;
}
.det-breadcrumb-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

/* ── Detalle — loading state ─────────────────────────────────────────────── */
.det-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Detalle — info grid ─────────────────────────────────────────────────── */
.det-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 4px 0 8px;
}
.det-info-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.det-info-row:nth-child(2n)  { border-left: 1px solid rgba(255,255,255,0.04); }
.det-info-full {
  grid-column: 1 / -1;
}
.det-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.det-code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(0,212,255,0.07);
  color: var(--accent2);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: 4px;
  padding: 1px 7px;
  display: inline-block;
}

/* ── Detalle — contadores en header ─────────────────────────────────────── */
.det-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  border-radius: 10px;
  padding: 0 7px;
  height: 18px;
  margin-left: 6px;
}

/* ── Proveedor chip ──────────────────────────────────────────────────────── */
.prov-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  white-space: nowrap;
}
.prov-chip-aws       { color: #FF9900; border-color: rgba(255,153,0,0.25);  background: rgba(255,153,0,0.07); }
.prov-chip-azure     { color: #00B4D8; border-color: rgba(0,180,216,0.25);  background: rgba(0,180,216,0.07); }
.prov-chip-cloudflare{ color: #F38020; border-color: rgba(243,128,32,0.25); background: rgba(243,128,32,0.07); }
.prov-chip-gcp       { color: #4285F4; border-color: rgba(66,133,244,0.25); background: rgba(66,133,244,0.07); }
.prov-chip-site24x7  { color: #00BFA5; border-color: rgba(0,191,165,0.25); background: rgba(0,191,165,0.07); }
.prov-chip-mixto,
.prov-chip-otro      { color: var(--text-muted); }

/* ── Detalle — select de asignación de cuenta ───────────────────────────── */
.det-cuenta-select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 4px 8px;
  font-size: 11.5px;
  font-family: var(--font);
  cursor: pointer;
  max-width: 180px;
  transition: border-color var(--dur) var(--ease);
}
.det-cuenta-select:hover  { border-color: var(--accent2); }
.det-cuenta-select:focus  { outline: none; border-color: var(--accent2); }

/* ── Nombre de servicio truncado ─────────────────────────────────────────── */
.det-svc-nombre {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Estado vacío dentro de cards ───────────────────────────────────────── */
.det-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
}

/* ── Columna de acciones compacta ────────────────────────────────────────── */
.actions-cell {
  white-space: nowrap;
}